/* ============================================================================
   Kairis · Plataforma de formación — sistema visual
   Basado en estilo-kairis.md (Conceptualismo Humanista)
============================================================================ */
:root{
  --bg-canvas:#EEF1EA; --bg-paper:#F7F5EF; --bg-ink:#171714; --bg-white:#fff;
  --text-primary:#171714; --text-secondary:#56554F;
  --text-on-ink:#F7F5EF; --text-on-ink-dim:#A8A69E;
  --line-soft:#D7D2C9; --line-hair:rgba(23,23,20,.08);
  --accent-tech:#6F8FA6; --accent-tech-deep:#4C6C85; --tint-tech:#DDE5EC;
  --accent-sage:#9FB4A3; --accent-sage-deep:#6F8B74; --tint-sage:#D9E2DC;
  --accent-human:#D08A6C; --accent-human-deep:#B5674A; --tint-human:#F3DFD3;
  --accent-lime:#C8D39B; --accent-lime-deep:#7E8B4E; --tint-lime:#E6EAD0;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius-xl:32px; --radius-lg:24px; --radius-md:18px; --radius-sm:12px; --radius-pill:999px;
  --shadow-soft:0 10px 30px rgba(23,23,20,.05);
  --shadow-card:0 1px 2px rgba(23,23,20,.04),0 8px 24px rgba(23,23,20,.05);
  --ease:cubic-bezier(.22,.61,.36,1);

  --sem-roto:#B3402F;--sem-roto-bg:#F7E5E0;--sem-warn:#E8C56A;--sem-warn-bg:#F6EDD1;}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg-canvas); color:var(--text-primary);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  overflow:hidden;
}
[data-accent="tech"]{--accent:var(--accent-tech);--accent-deep:var(--accent-tech-deep);--tint:var(--tint-tech)}
[data-accent="sage"]{--accent:var(--accent-sage);--accent-deep:var(--accent-sage-deep);--tint:var(--tint-sage)}
[data-accent="human"]{--accent:var(--accent-human);--accent-deep:var(--accent-human-deep);--tint:var(--tint-human)}
[data-accent="lime"]{--accent:var(--accent-lime);--accent-deep:var(--accent-lime-deep);--tint:var(--tint-lime)}
:root{--accent:var(--accent-human);--accent-deep:var(--accent-human-deep);--tint:var(--tint-human)}

/* ---------- Barra superior ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:60px; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:0 clamp(16px,3vw,32px);
  background:rgba(238,241,234,.9); backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line-hair);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:16px}
.brand__k{width:26px;height:26px;border-radius:7px;background:var(--bg-ink);color:var(--text-on-ink);
  display:flex;align-items:center;justify-content:center;font-size:15px;position:relative;flex:0 0 auto}
.brand__k::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--accent-human)}
.topbar__mod{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__spacer{flex:1}
.topbar__btn{font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:8px 14px;color:var(--text-primary);display:inline-flex;align-items:center;gap:7px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.topbar__btn:hover{border-color:var(--accent)}
.topbar__btn.is-on{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.topbar__btn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
/* «en directo» (Fase 17): hay un formador emitiendo en esta sala */
.topbar__btn.is-live{border-color:var(--accent-sage-deep)}
.topbar__btn.is-live .dot{background:var(--accent-sage-deep)}
/* menú desplegable del formador (Fase 19) */
.fmenu{position:relative;display:inline-block}
.fmenu__btn.is-on{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.fmenu__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:252px;z-index:60;display:none;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:6px}
.fmenu.is-open .fmenu__panel{display:block}
.fmenu__head{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-secondary);padding:9px 12px 7px}
.fmenu__item{display:block;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:14px;color:var(--text-primary);padding:10px 12px;border-radius:var(--radius-sm)}
.fmenu__item:hover{background:var(--tint)}
.fmenu__item--salir{color:var(--accent-human-deep)}
.fmenu__sep{height:1px;background:var(--line-hair);margin:6px 4px}

/* ---------- Escenario de diapositivas ---------- */
.stage{position:fixed;inset:60px 0 64px 0;overflow:hidden}
.slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;
  padding:clamp(24px,4vw,64px) clamp(24px,6vw,90px);
  overflow-y:auto;
  transition:opacity .4s var(--ease);
}
.slide.is-active{opacity:1;pointer-events:auto}
/* margin:auto centra en vertical cuando sobra sitio y NO recorta por arriba
   cuando el contenido desborda (justify-content:center sí recortaba) */
.slide__inner{width:100%;max-width:1080px;margin:auto}
.wide .slide__inner{max-width:1180px}

/* Eyebrow / títulos */
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent-deep);display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}
h1.s-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.03;
  margin:0 0 20px;font-size:clamp(30px,4.6vw,58px);max-width:20ch}
h2.s-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  margin:0 0 18px;font-size:clamp(26px,3.4vw,44px);max-width:22ch}
.s-title em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent-deep)}
.lead{font-size:clamp(15px,1.55vw,19px);color:var(--text-secondary);max-width:64ch;margin:0 0 24px}

/* ---------- Bloques de contenido ---------- */
.blocks{display:flex;flex-direction:column;gap:18px}
.bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bullets li{position:relative;padding-left:26px;font-size:15.5px;color:var(--text-primary)}
.bullets li::before{content:'';position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--accent)}
.callout{border-radius:var(--radius-md);padding:16px 20px;font-size:15px;border:1px solid var(--line-soft);
  background:var(--bg-paper);display:flex;gap:12px;align-items:flex-start}
.callout::before{font-size:18px;line-height:1.3}
.callout.info{border-color:var(--accent-tech);background:var(--tint-tech)}
.callout.info::before{content:'💡'}
.callout.warn{border-color:var(--sem-warn);background:var(--sem-warn-bg)}
.callout.warn::before{content:'⚠️'}
.callout.ok{border-color:var(--accent-sage);background:var(--tint-sage)}
.callout.ok::before{content:'✅'}

.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.paso{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:18px;box-shadow:var(--shadow-card)}
.paso__n{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--accent-deep);
  background:var(--tint);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.paso__t{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 6px}
.paso__x{font-size:14px;color:var(--text-secondary);margin:0}

.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dos__col{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:20px}
.dos__col h4{font-family:var(--font-display);font-weight:700;font-size:15.5px;margin:0 0 12px}
.dos__col .bullets li{font-size:14.5px}

table.s-table{width:100%;border-collapse:collapse;background:var(--bg-paper);border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--line-soft);font-size:14.5px}
table.s-table th{background:var(--tint);text-align:left;padding:11px 16px;font-family:var(--font-mono);
  font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-deep)}
table.s-table td{padding:11px 16px;border-top:1px solid var(--line-hair)}

.iconlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.iconlist .it{display:flex;gap:10px;align-items:center;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:12px 14px;font-size:14.5px}
.iconlist .it .ic{font-size:20px}

/* ---------- Portada / sección / cierre / créditos ---------- */
.slide.tipo-portada,.slide.tipo-seccion,.slide.tipo-cierre{background:var(--bg-ink);color:var(--text-on-ink)}
.slide.tipo-portada .lead,.slide.tipo-seccion .lead,.slide.tipo-cierre .lead{color:var(--text-on-ink-dim)}
.slide.tipo-portada .s-title em,.slide.tipo-seccion .s-title em,.slide.tipo-cierre .s-title em{color:var(--accent-lime)}
.slide.tipo-seccion .eyebrow,.slide.tipo-portada .eyebrow,.slide.tipo-cierre .eyebrow{color:var(--text-on-ink-dim)}
.slide.tipo-cierre .bullets li{color:var(--text-on-ink)}
.slide.tipo-cierre .bullets li::before{background:var(--accent-lime)}
.portada__meta{margin-top:22px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-on-ink-dim);
  border-top:1px solid rgba(247,245,239,.14);padding-top:16px;max-width:60ch}
.portada__badge{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bg-ink);background:var(--accent-lime);padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:20px}
.seccion__num{font-family:var(--font-mono);font-size:clamp(60px,11vw,150px);font-weight:800;line-height:.85;
  color:var(--accent-lime);opacity:.9;margin-bottom:10px}
.creditos-box{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:24px;max-width:70ch;color:var(--text-secondary);font-size:15px;box-shadow:var(--shadow-card)}

/* ---------- Práctica (ficha) ---------- */
.practica{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
.practica__ctx{font-size:15.5px;color:var(--text-secondary);margin:0 0 18px}
.matbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.mat{font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary);background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 12px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.mat:hover{border-color:var(--accent);background:var(--tint)}
.mat .dl{font-weight:700;color:var(--accent-deep)}
.mat-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);margin:18px 0 8px;display:block}

/* Prompt inline con botón copiar */
.prompt{background:var(--bg-ink);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column}
.prompt__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid rgba(247,245,239,.12)}
.prompt__label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-on-ink-dim)}
.prompt__copy{font-family:var(--font-display);font-weight:600;font-size:12.5px;cursor:pointer;
  background:var(--accent);color:var(--bg-ink);border:none;border-radius:var(--radius-pill);
  padding:7px 14px;display:inline-flex;align-items:center;gap:6px;transition:transform .15s var(--ease),background .2s}
.prompt__copy:hover{transform:translateY(-1px)}
.prompt__copy.done{background:var(--accent-lime)}
.prompt__body{margin:0;padding:16px;color:#EDEBE4;font-family:var(--font-mono);font-size:13px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;max-height:46vh;overflow-y:auto}
.prompt__body::-webkit-scrollbar{width:8px}
.prompt__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}

/* Sub-pieza `detalle`: el detalle fino (precios, matices) plegado por defecto. */
.detalle{margin-top:14px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:12px 14px}
.detalle summary{cursor:pointer;font-family:var(--font-display);font-weight:600;
  font-size:13.5px;color:var(--accent-deep)}
.detalle summary:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.detalle__body{margin-top:12px}
.detalle__body > *:first-child{margin-top:0}

/* Varios prompts copiables a la vez (bloque 02): cada uno con SU botón.
   Los cuerpos se acortan porque van apilados: se ven los tres de un vistazo. */
.prompt-lista{display:flex;flex-direction:column;gap:12px}
.prompt-lista .prompt__body{max-height:24vh;font-size:12.5px}

/* Enlaces externos de una slide (abrir cada IA en su web). */
.enlace-ext{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-weight:600;font-size:13px;text-decoration:none;color:var(--accent-deep);
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:8px 14px;min-height:38px;transition:border-color .2s var(--ease)}
.enlace-ext:hover{border-color:var(--accent)}
.enlace-ext:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.enlace-ext .ext{font-size:11px;opacity:.7}

.reto-wrap{margin-top:20px;max-width:760px}
.variantes{margin-top:14px}
.variantes summary{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--accent-deep)}
.variantes .v{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:12px 14px;font-size:13.5px;color:var(--text-secondary);margin-top:10px}

/* Listado de casos de uso */
.usos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.uso{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:18px;
  box-shadow:var(--shadow-card);transition:transform .2s var(--ease)}
.uso:hover{transform:translateY(-3px)}
.uso .ic{font-size:24px;display:block;margin-bottom:8px}
.uso h4{font-family:var(--font-display);font-weight:700;font-size:15.5px;margin:0 0 4px}
.uso p{margin:0;font-size:13.5px;color:var(--text-secondary)}

/* Comparativa */
.comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}   /* se adapta al nº de columnas: 2 llenan el ancho, no dejan hueco (auto-fit colapsa tramos vacíos) */
.comp__col{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:20px;
  box-shadow:var(--shadow-card)}
.comp__col.is-destacada{border-color:var(--accent);background:var(--tint)}
.comp__lvl{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-deep);background:var(--bg-canvas);border-radius:var(--radius-pill);padding:4px 10px;display:inline-block;margin-bottom:10px}
.comp__col h4{font-family:var(--font-display);font-weight:800;font-size:18px;margin:0 0 10px}
.comp__col p{margin:0;font-size:14px;color:var(--text-secondary)}

/* ---------- Guía del formador ---------- */
.formador{margin-top:22px;border:1px dashed var(--accent-deep);border-radius:var(--radius-md);
  background:var(--tint);padding:14px 18px;display:none}
body.modo-formador .formador{display:block}
.formador__t{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-deep);margin:0 0 8px;display:flex;align-items:center;gap:7px}
.formador__t::before{content:'🎓'}
.formador .bullets li{font-size:14px}
.formador .prueba{margin-top:10px;font-size:14px;color:var(--text-primary)}
.formador .prueba b{color:var(--accent-deep)}

/* ---------- Barra inferior / navegación ---------- */
.botbar{position:fixed;bottom:0;left:0;right:0;height:64px;z-index:40;display:flex;align-items:center;
  gap:14px;padding:0 clamp(16px,3vw,32px);background:rgba(238,241,234,.92);
  backdrop-filter:blur(10px);border-top:1px solid var(--line-hair)}
.progress{flex:1;min-width:48px;height:6px;background:var(--line-soft);border-radius:var(--radius-pill);overflow:hidden}
.progress__bar{height:100%;background:var(--accent);width:0;transition:width .4s var(--ease)}
.counter{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);min-width:64px;text-align:center;white-space:nowrap}
.navbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-soft);background:var(--bg-paper);
  cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--text-primary);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.navbtn:hover{border-color:var(--accent);background:var(--tint)}
.navbtn:disabled{opacity:.35;cursor:default}

/* ---------- Overlay Índice ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(23,23,20,.5);backdrop-filter:blur(4px);
  display:none;padding:clamp(20px,5vh,60px) clamp(16px,4vw,48px);overflow-y:auto}
.overlay.is-open{display:block}
.overlay__box{max-width:1000px;margin:0 auto;background:var(--bg-canvas);border-radius:var(--radius-xl);
  padding:clamp(24px,4vw,40px);box-shadow:var(--shadow-soft)}
.overlay__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.overlay__head h3{font-family:var(--font-display);font-weight:800;font-size:24px;margin:0}
.overlay__close{cursor:pointer;border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:50%;
  width:38px;height:38px;font-size:18px}
.mod-group{margin-bottom:22px}
.mod-group__t{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-deep);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line-hair)}
/* evolución (Fase 16): bloques aún no liberados — se ven, no se entra */
.mod-group.is-bloqueado{opacity:.45}
.mod-group.is-bloqueado .jump{cursor:default}
.mod-group.is-bloqueado .jump:hover{border-color:var(--line-soft);background:var(--bg-paper)}
.mod-group.is-bloqueado .mod-group__t{cursor:default}
.mod-group__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.jump{text-align:left;cursor:pointer;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:10px 13px;font-size:13.5px;color:var(--text-primary);
  display:flex;gap:9px;align-items:center;transition:border-color .2s,background .2s;font-family:var(--font-body)}
.jump:hover{border-color:var(--accent);background:var(--tint)}
.jump .tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-deep);background:var(--tint);padding:2px 7px;border-radius:var(--radius-pill);flex:0 0 auto}
.jump.is-practica .tag{background:var(--bg-ink);color:var(--accent-lime)}

/* ---------- Fase 02 · índice anidado y áreas ---------- */
.mod-group__link{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:transparent;border:none;border-bottom:1px solid var(--line-hair);cursor:pointer;
  transition:color .2s var(--ease)}
.mod-group__link:hover,.mod-group__link:focus-visible{color:var(--text-primary);text-decoration:underline}
.mod-group__go{font-family:var(--font-mono);font-size:10px;text-transform:none;letter-spacing:.04em;
  color:var(--text-secondary);opacity:0;transition:opacity .2s var(--ease)}
.mod-group__link:hover .mod-group__go,.mod-group__link:focus-visible .mod-group__go{opacity:1}
@media (hover:none){.mod-group__go{opacity:1}}
.sub-group__t{grid-column:1 / -1;font-family:var(--font-display);font-weight:700;font-size:12.5px;
  color:var(--text-secondary);margin:8px 0 0;padding-left:2px;display:flex;align-items:center;gap:7px}
.sub-group__t::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
.jump.is-sub{margin-left:14px}
.areas-sep{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-secondary);margin:30px 0 14px;padding-top:18px;border-top:1px dashed var(--line-soft)}
.area-group.is-futuro .mod-group__link{color:var(--text-secondary)}
.area-group.is-futuro .jump{border-style:dashed}
.area-group.is-futuro .jump .tag{background:var(--bg-canvas);color:var(--text-secondary)}

/* ---------- Fase 02 · cintas (sub-bloque · futuro) ---------- */
.sub-cinta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-primary);
  background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-pill);
  padding:6px 14px;margin-bottom:18px;align-self:flex-start}
.sub-cinta__dot{width:7px;height:7px;border-radius:50%;background:var(--accent-deep);display:inline-block}
.cinta-futuro{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:#6E561A;background:#F3E9C9;
  border:1px dashed #C9A84C;border-radius:var(--radius-pill);padding:6px 14px;margin-bottom:18px;
  align-self:flex-start}

/* ---------- Fase 02 · migas ---------- */
.miga-sep{color:var(--accent-deep);margin:0 4px;font-weight:700}
.miga-area{color:var(--accent-human-deep);font-weight:700}

/* ---------- Fase 02 · panel «otros usos» + apunte ---------- */
/* Visible siempre (sin desplegar): título + mini-tarjetas */
.otros-usos{margin-top:16px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:12px 16px}
.otros-usos__t{font-family:var(--font-display);font-weight:700;font-size:13.5px;
  color:var(--accent-deep);margin-bottom:10px}
.otros-usos__t .ou-mini{font-weight:500;color:var(--text-secondary);font-size:12px}
.ou-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.ou-item{background:var(--bg-canvas);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:13px;color:var(--text-secondary);line-height:1.45}
.ou-item.is-truco{border-color:var(--accent);background:var(--tint)}
.ou-chip{display:inline-block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent-deep);border:1px solid var(--accent);border-radius:var(--radius-pill);
  padding:1px 7px;margin-right:4px;vertical-align:1px}
.apunte{margin-top:20px;background:var(--tint-sage);border:1px solid var(--accent-sage);
  border-radius:var(--radius-md);padding:12px 16px;max-width:70ch}
.apunte__t{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-primary);display:block;margin-bottom:6px}
.apunte .bullets li{font-size:13.5px}
.slide.tipo-seccion .apunte,.slide.tipo-portada .apunte,.slide.tipo-cierre .apunte{background:rgba(247,245,239,.08);
  border-color:rgba(247,245,239,.2)}
.slide.tipo-seccion .apunte .bullets li,.slide.tipo-portada .apunte .bullets li,
.slide.tipo-cierre .apunte .bullets li{color:var(--text-on-ink)}
.slide.tipo-seccion .apunte__t,.slide.tipo-portada .apunte__t,
.slide.tipo-cierre .apunte__t{color:var(--accent-sage)}

/* ---------- Fase 02 · botón volver al curso ---------- */
.volver-pill{font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;
  background:var(--bg-ink);color:var(--text-on-ink);border:none;border-radius:var(--radius-pill);
  padding:10px 16px;white-space:nowrap;transition:transform .15s var(--ease)}
.volver-pill:hover{transform:translateY(-1px)}

/* ---------- Fase 02 · tipo flujo ---------- */
.flujo{list-style:none;margin:8px 0 0;padding:0;max-width:760px;position:relative}
.flujo__paso{display:flex;gap:16px;position:relative;padding-bottom:22px}
.flujo__paso::before{content:'';position:absolute;left:19px;top:40px;bottom:0;width:2px;
  background:var(--line-soft)}
.flujo__paso:last-child::before{display:none}
.flujo__n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--tint);
  border:1px solid var(--accent);color:var(--accent-deep);font-family:var(--font-mono);font-weight:700;
  font-size:13px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.flujo__cuerpo{padding-top:6px}
.flujo__t{font-family:var(--font-display);font-weight:700;font-size:16.5px;margin:0 0 4px}
.flujo__x{font-size:14.5px;color:var(--text-secondary);margin:0}

/* ---------- Fase 02 · tipo html (demo embebida) ---------- */
.html-embed{width:100%;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  background:var(--bg-paper);box-shadow:var(--shadow-card)}

/* ---------- Fase 04 · mapa de capacidades ---------- */
.mapa{margin-top:10px;max-width:1080px}
.mapa__fila{display:flex;align-items:stretch;gap:0}
.mapa__nodo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:18px 10px 14px;cursor:pointer;font-family:var(--font-body);color:var(--text-secondary);
  opacity:.55;transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease)}
.mapa__nodo:hover{transform:translateY(-2px)}
.mapa__nodo.is-encendida{opacity:1;border-color:var(--accent);background:var(--tint);color:var(--text-primary);
  box-shadow:var(--shadow-card)}
.mapa__nodo.is-futuro{border-style:dashed}
.mapa__icono{font-size:26px;filter:grayscale(1);transition:filter .3s var(--ease)}
.mapa__nodo.is-encendida .mapa__icono{filter:none}
.mapa__titulo{font-family:var(--font-display);font-weight:800;font-size:15px}
.mapa__que{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.mapa__ancla{font-family:var(--font-serif);font-style:italic;font-size:12.5px;text-align:center;
  color:var(--text-secondary);margin-top:6px;line-height:1.35}
.mapa__nodo.is-encendida .mapa__ancla{color:var(--text-primary)}
.mapa__union{width:clamp(14px,3vw,40px);height:3px;background:var(--line-soft);align-self:center;
  border-radius:var(--radius-pill);flex:0 0 auto;transition:background .3s var(--ease)}
.mapa__union.is-encendida{background:var(--accent)}
.mapa__info{margin-top:18px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:14px 18px;font-size:15px;color:var(--text-secondary);min-height:52px}
.mapa__info-t{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep);margin-bottom:5px}
.mapa__info.is-completo{border-color:var(--accent);background:var(--tint);color:var(--text-primary)}
.mapa__acciones{margin-top:14px}
.mapa__btn{font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer;border:none;
  background:var(--bg-ink);color:var(--text-on-ink);border-radius:var(--radius-pill);padding:11px 20px;
  transition:transform .15s var(--ease)}
.mapa__btn:hover{transform:translateY(-1px)}
/* modo completo (resumen): los nodos no son interactivos */
.mapa.is-completa .mapa__nodo{cursor:default}
.mapa.is-completa .mapa__nodo:hover{transform:none}
@media (max-width:760px){
  .mapa__fila{flex-direction:column;gap:0}
  .mapa__nodo{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:6px 12px;
    padding:12px 14px;text-align:left}
  .mapa__que{text-align:left}
  .mapa__ancla{text-align:left;margin-top:2px;flex-basis:100%}
  .mapa__union{width:3px;height:16px;margin-left:32px;align-self:flex-start}
}

/* ---------- Ficha resumen de bloque ---------- */
.ficha{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.ficha:has(> .ficha__item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
/* con 7 tarjetas, la última cierra a todo el ancho (no queda huérfana) */
.ficha:has(> .ficha__item:nth-child(7):last-child) .ficha__item:last-child{grid-column:1/-1}
@media (max-width:900px){.ficha{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){.ficha{grid-template-columns:1fr!important}}
.ficha__item{display:flex;gap:12px;align-items:flex-start;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:var(--radius-md);
  padding:14px 16px}
.ficha__ic{font-size:20px;line-height:1;margin-top:2px}
.ficha__item h4{font-family:var(--font-display);font-weight:700;font-size:14.5px;margin:0 0 4px}
.ficha__item p{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.45}
.ficha__ancla{margin-top:20px;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(17px,2vw,21px);color:var(--accent-deep)}

/* ---------- Demos ---------- */
.demo-wrap{margin-top:8px}
.demo-inline{margin-top:20px}
.tipo-demo .demo-wrap + .prompt{margin-top:18px}

/* Demo predicción */
.pred{display:grid;grid-template-columns:1fr;gap:20px}
.pred__switch{display:flex;gap:10px;flex-wrap:wrap}
.pred__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:14px;
  border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:var(--radius-pill);padding:10px 18px;
  transition:all .2s var(--ease)}
.pred__btn.is-on{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.pred__ctxnote{font-size:14px;color:var(--text-secondary);min-height:20px}
.pred__sentence{font-family:var(--font-serif);font-size:clamp(20px,2.6vw,30px);line-height:1.35;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:22px 26px}
.pred__blank{color:var(--accent-deep);font-weight:700;border-bottom:3px dashed var(--accent);padding:0 6px}
.pred__bars{display:flex;flex-direction:column;gap:10px}
.pred__row{display:grid;grid-template-columns:130px 1fr 58px;align-items:center;gap:12px}
.pred__word{font-family:var(--font-mono);font-size:14px;text-align:right}
.pred__track{height:26px;background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-pill);overflow:hidden}
.pred__fill{height:100%;background:var(--accent);width:0;border-radius:var(--radius-pill);transition:width .6s var(--ease)}
.pred__pct{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}
.pred__row.top .pred__fill{background:var(--accent-deep)}
.pred__row.top .pred__word{font-weight:700;color:var(--accent-deep)}

/* Demo tokens */
.tok__input{width:100%;font-family:var(--font-body);font-size:16px;border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:14px 16px;background:var(--bg-paper);color:var(--text-primary);resize:vertical;min-height:74px}
.tok__input:focus{outline:none;border-color:var(--accent)}
.tok__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.tok__chip{font-family:var(--font-mono);font-size:13px;padding:5px 9px;border-radius:var(--radius-sm);
  background:var(--tint);border:1px solid var(--accent);color:var(--accent-deep)}
.tok__chip.sp{background:transparent;border-color:transparent;color:var(--text-secondary);padding-left:2px;padding-right:2px}
.tok__stats{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.tok__stat b{font-family:var(--font-mono);font-size:24px;display:block;color:var(--accent-deep)}
.tok__stat span{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}

/* Demo interés compuesto (Extras · deslizadores) */
.ic{display:flex;flex-direction:column;gap:18px}
.ic__controls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ic__ctrl{display:flex;flex-direction:column;gap:8px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:14px 16px}
.ic__lbl{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
.ic__lbl b{color:var(--accent-deep);font-size:14px}
.ic__ctrl input[type=range]{width:100%;accent-color:var(--accent-deep);cursor:pointer}
.ic__chart{display:flex;align-items:flex-end;gap:2px;height:170px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:14px 14px 0}
.ic__bar{flex:1;min-width:2px;background:var(--accent-deep);border-radius:3px 3px 0 0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
.ic__bar-ap{background:var(--accent-sage);width:100%}
.ic__leyenda{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);flex-wrap:wrap}
.ic__dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.ic__dot.is-ap{background:var(--accent-sage);margin-left:14px}
.ic__leyenda .ic__dot:first-child{margin-left:0}
.ic__dot.is-in{background:var(--accent-deep);margin-left:14px}
.ic__stats{display:flex;gap:22px;flex-wrap:wrap}
.ic__stat b{font-family:var(--font-mono);font-size:24px;display:block;color:var(--text-primary)}
.ic__stat.is-int b{color:var(--accent-deep)}
.ic__stat.is-total b{color:var(--accent-deep);font-size:28px}
.ic__stat span{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}

/* Demo tracker de hábitos (Extras · mini-app) */
.th{display:flex;flex-direction:column;gap:14px}
.th__grid{display:grid;grid-template-columns:minmax(96px,1.4fr) repeat(7,1fr) 64px;gap:6px;align-items:center;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:16px}
.th__dia{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-secondary);text-align:center}
.th__habito{font-family:var(--font-display);font-weight:600;font-size:14.5px;padding-right:6px}
.th__cell{cursor:pointer;height:34px;padding:0;border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:var(--bg-canvas);display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease)}
.th__cell .th__check{opacity:0;font-size:15px;color:var(--accent-deep);transition:opacity .15s var(--ease)}
.th__cell:hover{border-color:var(--accent)}
.th__cell.is-on{background:var(--tint);border-color:var(--accent)}
.th__cell.is-on .th__check{opacity:1}
.th__cuenta{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);text-align:center}
.th__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.th__total{font-size:14.5px;color:var(--text-secondary)}
.th__total b{font-family:var(--font-mono);font-size:20px;color:var(--accent-deep)}
.th__reset{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:var(--radius-pill);padding:9px 16px;
  transition:all .2s var(--ease)}
.th__reset:hover{border-color:var(--accent);color:var(--accent-deep)}

/* Demos duales (fuente ↔ resultado): markdown, csv, json */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dual__col{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:14px 16px;min-width:0}
.dual__t{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);margin-bottom:10px}
.dual__nota{margin-top:12px;font-size:13px;color:var(--text-secondary)}
.mdv__input{width:100%;min-height:230px;font-family:var(--font-mono);font-size:13px;line-height:1.6;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px;background:var(--bg-canvas);
  color:var(--text-primary);resize:vertical}
.mdv__input:focus{outline:none;border-color:var(--accent)}
.mdv__out{min-height:230px;font-size:14px}
.mdv__out h3{font-family:var(--font-display);font-weight:800;font-size:20px;margin:4px 0 8px}
.mdv__out h4{font-family:var(--font-display);font-weight:700;font-size:16px;margin:12px 0 6px}
.mdv__out h5{font-family:var(--font-display);font-weight:700;font-size:14px;margin:10px 0 4px}
.mdv__out p{margin:6px 0}
.mdv__out ul{margin:4px 0;padding-left:20px}
.mdv__out li{margin:3px 0}
.csvd__raw{font-family:var(--font-mono);font-size:13px;line-height:1.9;overflow-x:auto}
.csvd__linea.is-cab .csvd__celda{font-weight:700}
.csvd__celda{padding:2px 5px;border-radius:6px;transition:box-shadow .15s var(--ease)}
.csvd__coma{color:var(--text-secondary);margin:0 1px}
.csvd__tabla{border-collapse:collapse;width:100%;font-size:13.5px}
.csvd__tabla th,.csvd__tabla td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--line-hair);
  transition:box-shadow .15s var(--ease)}
.csvd__tabla th{font-family:var(--font-display);font-size:12.5px}
.csvd__raw .col-0,.csvd__tabla .col-0{background:var(--tint-tech);color:var(--accent-tech-deep)}
.csvd__raw .col-1,.csvd__tabla .col-1{background:var(--tint-sage);color:var(--accent-sage-deep)}
.csvd__raw .col-2,.csvd__tabla .col-2{background:var(--tint-human);color:var(--accent-human-deep)}
.csvd__raw .col-3,.csvd__tabla .col-3{background:var(--tint-lime);color:var(--accent-lime-deep)}
.csvd__tabla .col-0,.csvd__tabla .col-1,.csvd__tabla .col-2,.csvd__tabla .col-3{color:var(--text-primary)}
[data-col].is-hover{box-shadow:inset 0 0 0 2px var(--bg-ink)}
.jsd__raw{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;margin:0;overflow-x:auto;color:var(--text-secondary)}
.jsd__k{color:var(--accent-tech-deep);font-weight:600}
.jsd__v{color:var(--accent-sage-deep)}
.jsd__n{color:var(--accent-human-deep)}
.jsd__b{color:var(--accent-lime-deep);font-weight:700}
.jsd__ficha{display:flex;flex-direction:column;gap:8px}
.jsd__fila,.jsd__grupo{background:var(--bg-canvas);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 12px}
.jsd__fila{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.jsd__et{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.jsd__et i{text-transform:none;letter-spacing:0}
.jsd__grupo .jsd__sub{display:flex;justify-content:space-between;font-size:13.5px;margin-top:6px;
  background:var(--bg-paper);border:1px solid var(--line-hair);border-radius:8px;padding:5px 10px}

/* Demo ventana de contexto (texto que se borra por el principio) */
.vc{display:flex;flex-direction:column;gap:14px}
.vc__marco{background:var(--bg-paper);border:2px dashed var(--accent);border-radius:var(--radius-lg);padding:12px 14px}
.vc__etiq{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-deep);margin-bottom:10px}
.vc__texto{margin:0;font-family:var(--font-serif);font-size:16px;line-height:1.75;
  color:var(--text-primary);min-height:86px}
.vc__pal{transition:opacity .6s var(--ease),filter .6s var(--ease)}
.vc__pal.is-nueva{opacity:0}
.vc__pal.is-borrada{opacity:0;filter:blur(3px)}
.vc__medidor{display:flex;align-items:center;gap:10px}
.vc__medidor-tag{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary);white-space:nowrap}
.vc__track{flex:1;height:12px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);overflow:hidden}
.vc__fill{height:100%;width:0;background:var(--accent);border-radius:var(--radius-pill);
  transition:width .5s var(--ease)}
.vc__fill.is-llena{background:var(--accent-deep)}
.vc__medidor-n{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);white-space:nowrap}
@media (max-width:480px){.vc__medidor-tag{display:none}}
.vc__acciones{display:flex;gap:8px;flex-wrap:wrap}
.vc__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:var(--radius-pill);padding:8px 14px;
  transition:all .2s var(--ease)}
.vc__btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.vc__btn.is-ghost{background:transparent}
.vc__btn[disabled]{opacity:.45;cursor:default}
.vc__btn[disabled]:hover{border-color:var(--line-soft);color:inherit}
.vc__nota{font-size:13.5px;color:var(--text-secondary);min-height:20px}
@media (prefers-reduced-motion:reduce){
  /* sin desvanecido: lo recortado se ve directamente en gris, no invisible */
  .vc__pal.is-borrada{opacity:.35;filter:none;color:var(--text-secondary)}
}

/* Demo tokens por idioma */
.lang{display:flex;flex-direction:column;gap:14px}
.lang__frase{font-family:var(--font-serif);font-size:15.5px;color:var(--text-secondary)}
.lang__bars{display:flex;flex-direction:column;gap:10px}
.lang__row{display:grid;grid-template-columns:120px 1fr 150px;align-items:center;gap:12px}
.lang__lang{font-size:13.5px;text-align:right}
.lang__row.is-mejor .lang__lang{font-weight:700}
.lang__row.is-mejor .pred__fill{background:var(--accent-sage-deep)}
.lang__n{font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary)}
.lang__ratio{color:var(--text-secondary)}

/* Demo tokens en libros */
.lib{display:flex;flex-direction:column;gap:12px}
.lib__row{display:grid;grid-template-columns:210px 1fr 210px;align-items:center;gap:12px}
.lib__t{font-size:13.5px;text-align:right}
.lib__track{position:relative;height:22px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);overflow:visible}
.lib__fill{height:100%;background:var(--accent-human);border-radius:var(--radius-pill)}
.lib__fill.is-cabe{background:var(--accent-sage)}
.lib__ventana{position:absolute;top:-5px;bottom:-5px;width:3px;background:var(--bg-ink);border-radius:2px}
.lib__n{font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}
.lib__nota{color:var(--text-secondary);font-family:var(--font-body)}
.lib__leyenda{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-secondary);flex-wrap:wrap}
.lib__marca{display:inline-block;width:3px;height:14px;background:var(--bg-ink);border-radius:2px}

/* Demo precios API */
.pv{display:flex;flex-direction:column;gap:16px}
.pv__tabla{border-collapse:collapse;width:100%;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);overflow:hidden;font-size:14px}
.pv__tabla th{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);color:var(--text-secondary)}
.pv__tabla th span{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:400}
.pv__fila{cursor:pointer;transition:background .15s var(--ease)}
.pv__fila td{padding:10px 14px;border-bottom:1px solid var(--line-hair)}
.pv__fila:hover{background:var(--bg-canvas)}
.pv__fila.is-sel{background:var(--tint);box-shadow:inset 3px 0 0 var(--accent-deep)}
.pv__fila:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.pv__fila .pv__out{font-weight:700;color:var(--accent-deep)}
.pv__controls{grid-template-columns:1fr 1fr}

/* Demo transacción de tokens */
.tx{display:flex;flex-direction:column;gap:14px}
.tx__barra{display:flex;height:34px;border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--line-soft)}
.tx__seg{height:100%;min-width:3px;transition:width .35s var(--ease)}
.tx--perfil{background:var(--accent-lime)}
.tx--sistema{background:var(--line-soft)}
.tx--historial{background:var(--accent-tech)}
.tx--archivo{background:var(--accent-human)}
.tx--mensaje{background:var(--accent-sage-deep)}
.tx--respuesta{background:var(--bg-ink)}
.tx__lista{display:flex;flex-wrap:wrap;gap:8px 18px}
.tx__item{font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.tx__item b{color:var(--text-primary);font-family:var(--font-mono);font-size:12.5px}
.tx__dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.tx__total{font-size:15px}
.tx__total b{font-family:var(--font-mono);color:var(--accent-deep)}
.tx__ahorro{color:var(--accent-sage-deep);font-weight:600}

/* ---------- Barra de roles / sincronización ---------- */
.rolebar{display:flex;align-items:center;gap:8px}
.topbar__btn.ghost{background:transparent}
.sync-pill{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-secondary);background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:5px 11px;white-space:nowrap}
.sync-pill.is-on{color:var(--accent-sage-deep);border-color:var(--accent-sage);background:var(--tint-sage)}
.followers-pill{font-family:var(--font-mono);font-size:12px;color:var(--accent-deep);background:var(--tint);
  border:1px solid var(--accent);border-radius:var(--radius-pill);padding:6px 11px}

/* ---------- Modal (contraseña) ---------- */
.modal{position:fixed;inset:0;z-index:70;background:rgba(23,23,20,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px}
.modal.is-open{display:flex}
.modal__box{background:var(--bg-canvas);border-radius:var(--radius-xl);padding:28px 30px;max-width:420px;width:100%;
  box-shadow:var(--shadow-soft)}
.modal__box h3{font-family:var(--font-display);font-weight:800;font-size:22px;margin:0 0 8px}
.modal__box p{color:var(--text-secondary);font-size:14.5px;margin:0 0 16px}
.modal__input{width:100%;font-family:var(--font-body);font-size:16px;border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:12px 14px;background:var(--bg-paper);color:var(--text-primary)}
.modal__input:focus{outline:none;border-color:var(--accent)}
.modal__error{color:#B5674A;font-size:13px;min-height:18px;margin-top:8px;font-family:var(--font-mono)}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.btn-primary{font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer;border:none;
  background:var(--bg-ink);color:var(--text-on-ink);border-radius:var(--radius-pill);padding:11px 22px}
.btn-ghost{font-family:var(--font-display);font-weight:600;font-size:14px;cursor:pointer;
  background:transparent;border:1px solid var(--line-soft);color:var(--text-primary);border-radius:var(--radius-pill);padding:11px 20px}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:78px;left:50%;transform:translateX(-50%) translateY(20px);z-index:65;
  background:var(--bg-ink);color:var(--text-on-ink);font-size:14px;padding:12px 20px;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:80vw;text-align:center}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Ayuda de teclado ---------- */
.khint{position:fixed;bottom:74px;right:20px;z-index:30;font-family:var(--font-mono);font-size:11px;
  color:var(--text-secondary);background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:5px 12px;opacity:.75}
/* Aviso de que la slide sigue por debajo del borde */
.scrollcue{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:30;
  font-family:var(--font-mono);font-size:11px;color:var(--text-on-ink);background:var(--bg-ink);
  border-radius:var(--radius-pill);padding:5px 14px;opacity:.85;pointer-events:none}
.scrollcue[hidden]{display:none}

/* ---------- Responsive ---------- */
/* Etiquetas duales de los botones de rol: larga en escritorio, corta en móvil */
.lbl-s{display:none}
@media (max-width:900px){
  .practica{grid-template-columns:1fr}
  .comp{grid-template-columns:1fr}
  .dos{grid-template-columns:1fr}
  .topbar__mod{display:none}
  .khint{display:none}
  .ic__controls{grid-template-columns:1fr}
  .ic__chart{height:130px}
  .dual{grid-template-columns:1fr}
  .pv__controls{grid-template-columns:1fr}
  .lang__row{grid-template-columns:80px 1fr 128px}
  .lib__row{grid-template-columns:1fr;gap:4px}
  .lib__t{text-align:left;font-weight:600}
}
@media (max-width:700px){
  /* rol: etiquetas cortas */
  .lbl-l{display:none}
  .lbl-s{display:inline}
  /* sync-pill: solo el punto de estado (title conserva el texto completo) */
  .sync-pill{font-size:0;width:12px;height:12px;padding:0;border-radius:50%;
    background:var(--line-soft);border-color:var(--line-soft);flex:0 0 auto}
  .sync-pill.is-on{background:var(--accent-sage);border-color:var(--accent-sage-deep)}
  .topbar{gap:8px}
  .rolebar{gap:6px}
  .topbar__btn{padding:8px 10px;flex:0 0 auto}
}
@media (max-width:560px){
  .slide{padding:20px 20px}
  .pred__row{grid-template-columns:92px 1fr 46px}
  /* tracker de hábitos: parrilla compacta para que quepan las 9 columnas */
  .th__grid{grid-template-columns:minmax(60px,1fr) repeat(7,1fr) 42px;gap:3px;padding:10px}
  .th__habito{font-size:12px}
  .th__dia{font-size:10px}
  .th__cell{height:28px}
  .th__cuenta{font-size:11px}
  .topbar__btn span.lbl{display:none}
  /* botbar compacta: sin etiqueta de área ni texto del botón volver */
  .counter__area{display:none}
  .volver-txt{display:none}
  .volver-pill{padding:10px 12px}
  .botbar{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;
    animation-duration:.01ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important}
}

/* ============================================================================
   Revisión visual · Bloque 00 «Cómo piensa la IA»
   (recorte de prensa · teclado predictivo · coche y motor · perro que baila ·
    mapa que crece · entradas suaves de portada y ficha)
============================================================================ */
@keyframes kEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Entradas suaves (⚪): portada y ficha ---------- */
.slide.tipo-portada.is-active .s-title{animation:kEntra .8s var(--ease) both}
.slide.tipo-portada.is-active .lead{animation:kEntra .8s var(--ease) .12s both}
.slide.is-active .ficha__item{animation:kEntra .5s var(--ease) both}
.slide.is-active .ficha__item:nth-child(2){animation-delay:.06s}
.slide.is-active .ficha__item:nth-child(3){animation-delay:.12s}
.slide.is-active .ficha__item:nth-child(4){animation-delay:.18s}
.slide.is-active .ficha__item:nth-child(5){animation-delay:.24s}
.slide.is-active .ficha__item:nth-child(6){animation-delay:.3s}
.slide.is-active .ficha__item:nth-child(7){animation-delay:.36s}

/* ---------- Demo predicción: el perro, la tarjeta de contexto y el salto ---- */
.pred__escena{display:flex;align-items:center;gap:16px}
.pred__dog{font-size:clamp(34px,4.5vw,48px);line-height:1;flex:0 0 auto}
.pred__dog.is-pasea{animation:kPasea 2.6s ease-in-out infinite}
.pred__dog.is-baila{animation:kBaila .7s ease-in-out infinite alternate}
.pred__dog.is-quieto{animation:none}
@keyframes kPasea{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes kBaila{from{transform:rotate(-10deg)}to{transform:rotate(10deg) translateY(-4px)}}
.pred__ctxcard{display:block;background:var(--tint);border:1px solid var(--accent);
  border-left:5px solid var(--accent-deep);border-radius:var(--radius-sm);
  padding:14px 20px;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(17px,2.2vw,21px);line-height:1.45;color:var(--text-primary);
  opacity:0;transform:translateX(-14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pred__ctxcard.is-in{opacity:1;transform:none}
.pred__ctxcard-tag{display:block;font-family:var(--font-mono);font-style:normal;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-deep);margin-bottom:6px}
.pred__row{transition:transform .55s var(--ease),opacity .4s var(--ease)}
.pred__row.is-nueva{opacity:0;transform:translateY(10px)}
.pred__btn--salto{border-style:dashed}

/* ---------- Teclado predictivo (slide del LLM) ---------- */
.tp{display:grid;gap:14px;justify-items:start}
.tp__switch,.tp__acciones{display:flex;gap:8px;flex-wrap:wrap}
.tp__gbtn,.tp__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13.5px;
  padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line-soft);
  background:var(--bg-paper);color:var(--text-primary);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.tp__gbtn:hover,.tp__btn:hover{border-color:var(--accent)}
.tp__gbtn.is-on{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.tp__movil{width:min(560px,100%);border:2px solid var(--bg-ink);border-radius:26px;
  padding:20px 18px 14px;background:#fff;box-shadow:var(--shadow-card)}
.tp__pantalla{min-height:88px;font-family:var(--font-serif);
  font-size:clamp(17px,2.3vw,22px);line-height:1.5;color:var(--text-primary)}
.tp__word{display:inline-block;margin-left:.28em}
.tp__word.is-in{animation:kEntra .3s var(--ease) both}
.tp__cursor{display:inline-block;width:2px;height:1.05em;background:var(--accent-deep);
  vertical-align:text-bottom;margin-left:3px;animation:kCursor 1.05s steps(1) infinite}
@keyframes kCursor{0%,55%{opacity:1}56%,100%{opacity:0}}
.tp__chips{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line-hair);
  padding-top:12px;min-height:46px;align-items:center}
.tp__chip{flex:1;text-align:center;font-family:var(--font-display);font-weight:600;font-size:14px;
  padding:9px 8px;border-radius:10px;border:1px solid var(--line-soft);background:var(--bg-paper);
  color:var(--text-secondary);cursor:default;
  transition:transform .24s var(--ease),opacity .24s var(--ease),border-color .2s var(--ease)}
.tp__chip.is-central{background:var(--tint);border-color:var(--accent);color:var(--accent-deep);font-weight:700}
.tp.is-manual .tp__chip{cursor:pointer}
.tp.is-manual .tp__chip:hover{border-color:var(--accent-deep);transform:translateY(-2px)}
.tp__chip.is-pulso{animation:kPulsoChip .5s var(--ease)}
@keyframes kPulsoChip{50%{transform:scale(1.08);box-shadow:0 4px 14px rgba(23,23,20,.12)}}
.tp__chip.is-cae{transform:translateY(-10px);opacity:0}
.tp__fin{font-family:var(--font-mono);font-size:12px;color:var(--accent-sage-deep)}

/* ---------- Recorte de prensa (alucinaciones y futuros avisos) ---------- */
.np-wrap{display:grid;gap:12px;max-width:680px}
.np{position:relative;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-top:4px solid var(--bg-ink);border-radius:var(--radius-sm);
  padding:18px 22px;margin:0;box-shadow:var(--shadow-card);
  transform:rotate(-.4deg);animation:kPapel .6s var(--ease) both}
@keyframes kPapel{from{opacity:0;transform:rotate(-1.8deg) translateY(12px)}
  to{opacity:1;transform:rotate(-.4deg) translateY(0)}}
.np.is-quieta{animation:none;transform:none}
.np__ante{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom:1px solid var(--line-hair);padding-bottom:8px;margin-bottom:12px}
.np__titular{font-family:var(--font-serif);font-weight:700;font-size:clamp(20px,2.6vw,28px);
  line-height:1.12;margin:0 0 10px;padding-right:110px}
.np__bajada{font-family:var(--font-serif);font-size:16px;color:var(--text-secondary);margin:0 0 14px}
.np__cita{font-family:var(--font-serif);font-style:italic;border-left:3px solid var(--accent);
  padding-left:12px;margin:0 0 12px;color:var(--text-primary)}
.np__fuente{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.np__sello{position:absolute;top:44px;right:16px;color:var(--accent-human-deep);
  border:3px solid var(--accent-human-deep);border-radius:6px;padding:4px 10px;
  font-family:var(--font-display);font-weight:800;font-size:14.5px;letter-spacing:.06em;
  transform:rotate(8deg);opacity:.92;animation:kSello .45s var(--ease) .85s both}
@keyframes kSello{from{opacity:0;transform:rotate(8deg) scale(2.1)}
  to{opacity:.92;transform:rotate(8deg) scale(1)}}
.np.is-quieta .np__sello{animation:none}
.np__leccion{font-size:14.5px;font-family:var(--font-serif);font-style:italic;
  color:var(--text-secondary);margin:0}

/* ---------- El túnel del mensaje (mejora puntual, slide viaja-solo-mensaje · bloque 00) ----------
   Cálido (human) = la persona · azul (tech) = la máquina. El contraste de
   temperatura ES la lección: tu mensaje nace cálido y viaja por lo técnico. */
.tn{display:grid;gap:14px;margin-top:6px}
.tn__mandos{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:stretch}
.tn__mando{display:grid;gap:8px;align-content:start;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:12px 14px}
.tn__mando-titulo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:800;font-size:13px}
.tn__paso-num{width:20px;height:20px;border-radius:50%;background:var(--bg-ink);
  color:var(--text-on-ink);font-family:var(--font-mono);font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.tn__mando-nota{font-size:12px;color:var(--text-secondary);font-style:italic;max-width:32ch}
.tn__capas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.tn__capa{display:grid;gap:4px;cursor:pointer;padding:8px 10px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:var(--bg-canvas);opacity:.55;
  transition:border-color .2s var(--ease),opacity .2s var(--ease),background .2s var(--ease)}
.tn__capa:hover{border-color:var(--accent)}
.tn__capa.is-on{opacity:1;border-color:var(--accent-tech);background:var(--tint-tech)}
.tn__capa-cab{display:flex;gap:7px;align-items:center;font-family:var(--font-display);
  font-weight:700;font-size:12.5px}
.tn__capa input{width:15px;height:15px;accent-color:var(--accent-deep)}
.tn__capa-vive{font-size:11.5px;line-height:1.35;color:var(--text-secondary)}
.tn__barra{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tn__ver{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:var(--radius-pill);border:1px solid var(--bg-ink);
  background:var(--bg-ink);color:var(--text-on-ink);transition:opacity .2s var(--ease)}
.tn__ver:hover{opacity:.88}
.tn__donde{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.tn__explica{margin-bottom:10px}
.tn__explica p{margin:4px 0 0;font-size:14px;max-width:66ch}
.tn__est.is-actual{outline:2px solid var(--accent-tech-deep);outline-offset:2px;transform:scale(1.04)}
.tn__est--humana.is-actual{outline-color:var(--accent-human-deep)}
.tn__aviso{background:var(--tint-human);border:1px solid var(--accent-human);
  border-radius:var(--radius-sm);padding:9px 13px;font-size:13px}
.tn__via{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 0}
.tn__est{flex:1;min-width:86px;display:flex;flex-direction:column;align-items:center;gap:4px;
  border:1.5px dashed var(--line-soft);border-radius:var(--radius-md);
  padding:10px 6px;background:var(--bg-paper);opacity:.5;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.tn__est--humana.is-on{border-color:var(--accent-human);background:var(--tint-human)}
.tn__est.is-on{opacity:1;border-color:var(--accent-tech);background:var(--tint-tech)}
.tn__est--humana.is-on{border-color:var(--accent-human);background:var(--tint-human)}
.tn__est.is-off{opacity:.28}
.tn__est.is-ambar{border-color:var(--accent-human-deep);background:var(--tint-human)}
.tn__icono{font-size:22px;line-height:1}
.tn__nombre{font-family:var(--font-display);font-weight:700;font-size:11.5px;text-align:center}
.tn__estado{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);
  min-height:14px;text-align:center}
.tn__estado.is-ok{color:var(--accent-sage-deep);font-weight:700}
.tn__estado.is-ambar{color:var(--accent-human-deep);font-weight:700}
.tn__union{width:clamp(10px,1.6vw,26px);height:3px;background:var(--line-soft);
  align-self:center;position:relative;overflow:hidden;flex:0 0 auto}
.tn__flujo{position:absolute;inset:0;width:0;background:var(--accent-tech);
  transition:width .45s var(--ease)}
.tn__union.is-on .tn__flujo{width:100%}
.tn__panel{min-height:150px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-card)}
.tn__burbuja{white-space:pre-line;background:var(--tint-tech);border:1px solid var(--accent-tech);
  border-radius:var(--radius-md);padding:12px 16px;font-size:14.5px;line-height:1.55;
  max-width:64ch;animation:kEntra .35s var(--ease) both}
.tn__burbuja.is-humana{background:var(--tint-human);border-color:var(--accent-human);
  font-family:var(--font-serif);font-style:italic}
.tn__paquete{display:grid;gap:7px;margin-bottom:12px}
.tn__paquete-titulo{font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--accent-tech-deep)}
.tn__tarjeta{border-left:4px solid var(--accent-tech);background:var(--tint-tech);
  border-radius:6px;padding:7px 11px;font-size:13px;line-height:1.4;
  animation:kEntra .3s var(--ease) both}
.tn__tarjeta b{display:block;font-family:var(--font-mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--accent-tech-deep)}
.tn__tarjeta.is-humana{border-left-color:var(--accent-human);background:var(--tint-human)}
.tn__tarjeta.is-humana b{color:var(--accent-human-deep)}
.tn__tarjeta.is-tenue{opacity:.6}
.tn__tarjeta.is-ambar{border-left-color:var(--accent-human-deep);background:var(--tint-human)}
.tn__tarjeta.is-ambar b{color:var(--accent-human-deep)}
.tn__tokens{display:grid;gap:8px}
.tn__tokfila{display:flex;gap:5px;flex-wrap:wrap;min-height:26px}
.tn__tok{font-family:var(--font-mono);font-size:12px;background:var(--bg-white);
  border:1px solid var(--accent-tech);color:var(--text-primary);
  border-radius:6px;padding:2px 7px;animation:kEntra .3s var(--ease) both}
.tn__tok.is-humana{border-color:var(--accent-human);background:var(--tint-human)}
.tn__tok.is-sale{background:var(--tint-tech)}
.tn__tokflecha{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.tn__resp{display:grid;gap:10px}
.tn__oculta{background:var(--bg-canvas);border:1px dashed var(--line-soft);
  border-radius:var(--radius-md);padding:12px 16px;font-size:13.5px;color:var(--text-secondary)}
.tn__oculta b{display:block;font-family:var(--font-mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em}
.tn__nota{font-size:13px;color:var(--text-secondary);font-style:italic}
.tn__influye{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);
  border-top:1px solid var(--line-hair);padding-top:8px}
.tn__influye b{color:var(--accent-tech-deep)}
.tn__frase{font-family:var(--font-serif);font-style:italic;font-size:15.5px;
  color:var(--text-primary);text-align:center;margin:0}
@media (max-width:760px){
  .tn__mandos{grid-template-columns:1fr}
  .tn__via{flex-wrap:wrap;gap:6px}
  .tn__union{display:none}
  .tn__est{min-width:31%;flex:1 1 31%}
}

/* ---------- Mapa que crece (escalera + flujo + «estamos aquí») ---------- */
.mapa.is-escalera .mapa__fila{align-items:flex-end}
.mapa.is-escalera .mapa__nodo{transition:opacity .3s var(--ease),transform .3s var(--ease),
  border-color .3s var(--ease),background .3s var(--ease)}
.mapa.is-escalera .mapa__nodo[data-i='0']{min-height:100px}
.mapa.is-escalera .mapa__nodo[data-i='1']{min-height:114px}
.mapa.is-escalera .mapa__nodo[data-i='2']{min-height:128px}
.mapa.is-escalera .mapa__nodo[data-i='3']{min-height:142px}
.mapa.is-escalera .mapa__nodo[data-i='4']{min-height:156px}
.mapa.is-escalera .mapa__union{align-self:flex-end;margin-bottom:48px;position:relative;
  background:var(--line-soft);overflow:hidden}
.mapa.is-escalera .mapa__union.is-encendida{background:var(--line-soft)}
.mapa__flujo{position:absolute;inset:0;width:0;background:var(--accent);
  transition:width .5s var(--ease)}
.mapa__union.is-encendida .mapa__flujo{width:100%}
.mapa.is-escalera .mapa__nodo.is-actual{transform:scale(1.05);animation:kLate 2.4s ease-in-out infinite}
@keyframes kLate{0%,100%{box-shadow:0 0 0 0 rgba(111,143,166,.0)}
  50%{box-shadow:0 0 0 7px rgba(111,143,166,.16)}}
.mapa.is-escalera .mapa__nodo.is-futuro.is-encendida{animation:kBrilla 2.8s ease-in-out infinite}
@keyframes kBrilla{0%,100%{box-shadow:0 0 0 0 rgba(200,211,155,0)}
  50%{box-shadow:0 0 0 8px rgba(200,211,155,.28)}}

@media (max-width:760px){
  .np__titular{padding-right:0}
  .np__sello{position:static;display:inline-block;margin-top:8px}
  .pred__escena{gap:10px}
  .mapa.is-escalera .mapa__nodo{min-height:0!important}
  .mapa.is-escalera .mapa__union{margin-bottom:0;align-self:center}
}

/* ---------- Construye tu perfil (C4, bloque 01) ---------- */
.cp{display:grid;gap:18px;margin-top:6px}
.cp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.cp__idea{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:10px 12px;transition:border-color .2s var(--ease),background .2s var(--ease),
  transform .2s var(--ease)}
.cp__idea:hover{border-color:var(--accent);transform:translateY(-1px)}
.cp__idea.is-on{border-color:var(--accent-deep);background:var(--tint)}
.cp__check{width:16px;height:16px;margin-top:3px;accent-color:var(--accent-deep);flex:0 0 auto}
.cp__icono{font-size:18px;line-height:1.3;flex:0 0 auto}
.cp__cuerpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.cp__cuerpo b{font-family:var(--font-display);font-weight:700;font-size:13.5px;line-height:1.3}
.cp__cuerpo span{font-size:12.5px;color:var(--text-secondary);line-height:1.35}
.cp__panel{background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-card)}
.cp__panel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cp__panel-tag{font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent-deep)}
.cp__cuenta{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);margin-left:auto}
.cp__cuenta.is-pasada{color:var(--accent-human-deep)}
.cp__editor{width:100%;resize:vertical;font-family:var(--font-mono);font-size:13.5px;
  line-height:1.6;padding:12px 14px;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);background:#fff;color:var(--text-primary);outline:none;
  transition:border-color .2s var(--ease)}
.cp__editor:focus{border-color:var(--accent-deep)}
.cp__aviso{margin-top:8px;font-size:12.5px;color:var(--text-secondary);font-style:italic}
.cp__acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cp__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13.5px;
  padding:9px 15px;border-radius:var(--radius-pill);border:1px solid var(--line-soft);
  background:var(--bg-paper);color:var(--text-primary);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.cp__btn:hover{border-color:var(--accent)}
.cp__btn--pri{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.cp__btn--pri:hover{opacity:.88}

/* ============================================================================
   Revisión visual · Bloque 01 «Deja Claude a tu gusto» (accent sage)
   dos-perfiles · skills-galeria · preguntas-preview · anonimiza
============================================================================ */
/* ---------- El mismo Claude, dos perfiles ---------- */
.dp{display:grid;gap:14px;margin-top:6px}
.dp__hilo{display:grid;gap:10px;max-width:760px;transition:opacity .18s var(--ease)}
.dp__hilo.is-cambiando{opacity:0}
.dp__perfil{background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13.5px;font-style:italic;color:var(--text-primary)}
.dp__perfil-tag{display:block;font-family:var(--font-mono);font-style:normal;font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-deep);margin-bottom:4px}
.dp__pregunta{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.2vw,21px);
  background:var(--bg-ink);color:var(--text-on-ink);border-radius:var(--radius-md);
  padding:10px 16px;justify-self:start}
.dp__respuesta{background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:14px 18px;font-size:15px;line-height:1.55;
  box-shadow:var(--shadow-card)}

/* ---------- Ocho skills para empezar ---------- */
.skg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:6px}
.skg__card{display:flex;flex-direction:column;gap:8px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:14px 16px;
  box-shadow:var(--shadow-card)}
.skg__head{display:flex;align-items:center;gap:9px}
.skg__icono{font-size:22px;line-height:1}
.skg__nombre{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--accent-deep)}
.skg__que{font-size:13px;color:var(--text-secondary);line-height:1.4;margin:0;flex:1}
.skg__ver summary{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);
  cursor:pointer;list-style:none;padding:6px 0}
.skg__ver summary::before{content:'▸ '}
.skg__ver[open] summary::before{content:'▾ '}
.skg__prompt{font-family:var(--font-mono);font-size:11.5px;line-height:1.5;white-space:pre-wrap;
  background:var(--bg-white);border:1px solid var(--line-hair);border-radius:var(--radius-sm);
  padding:9px 11px;margin:6px 0 0;max-height:180px;overflow-y:auto}
.skg__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  padding:8px 12px;border-radius:var(--radius-pill);border:1px solid var(--line-soft);
  background:var(--bg-paper);color:var(--text-primary);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.skg__btn:hover{border-color:var(--accent);background:var(--tint)}

/* ---------- ¿Qué te preguntaría? ---------- */
.pqp{display:grid;gap:12px;margin-top:14px;border-top:1px solid var(--line-hair);padding-top:16px}
.pqp__tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep)}
.pqp__lista{margin:0;padding-left:22px;display:grid;gap:8px;max-width:640px}
.pqp__q{font-size:14.5px;line-height:1.4;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pqp__q.is-oculta{opacity:0;transform:translateY(6px)}
.pqp__q::marker{font-family:var(--font-mono);font-size:12px;color:var(--accent-deep)}

/* ---------- Anonimiza en un clic ---------- */
.anx{display:grid;gap:12px;margin-top:6px;max-width:720px}
.anx__doc{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:16px 20px;font-family:var(--font-serif);font-size:15.5px;line-height:1.65;
  box-shadow:var(--shadow-card)}
.anx__dato{background:var(--tint-human);border-radius:4px;padding:0 3px;color:var(--text-primary)}
.anx__dato.is-oculto{background:var(--tint);color:var(--text-primary);font-weight:600}
.anx__pie{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.anx__cuenta{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.anx__lema{font-family:var(--font-serif);font-style:italic;font-size:13.5px;color:var(--text-secondary)}

/* ============================================================================
   Revisión visual · Bloque 02 «El prompt» (accent human)
   dos-prompts · prompt-crece · plantilla-xml
============================================================================ */
/* ---------- Dos prompts, dos resultados ---------- */
.dpr{display:grid;gap:14px;margin-top:6px;max-width:760px}
.dpr__cuerpo{display:grid;gap:10px;transition:opacity .17s var(--ease)}
.dpr__cuerpo.is-cambiando{opacity:0}
.dpr__tag{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:6px}
.dpr__prompt{background:var(--bg-ink);color:var(--text-on-ink);border-radius:var(--radius-md);
  padding:12px 16px;font-family:var(--font-display);font-weight:600;font-size:15px}
.dpr__prompt .dpr__tag{color:var(--text-on-ink-dim)}
.dpr__res{position:relative;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:14px 18px 40px;font-size:14px;line-height:1.5;
  box-shadow:var(--shadow-card)}
.dpr__res ul{margin:0;padding-left:20px;display:grid;gap:6px}
.dpr__res p{margin:0 0 8px}
.dpr__nota{font-style:italic;color:var(--text-secondary);font-size:12.5px}
.dpr__sello{position:absolute;bottom:10px;right:14px;font-family:var(--font-mono);
  font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.dpr__sello.is-malo{background:var(--tint-human);color:var(--text-primary);border:1px solid var(--accent-human)}
.dpr__sello.is-bueno{background:var(--tint-sage);color:var(--text-primary);border:1px solid var(--accent-sage)}

/* ---------- El prompt que crece clave a clave ---------- */
.pcr{margin-top:6px}
.pcr__paneles{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.pcr__claves{display:grid;gap:7px}
.pcr__clave{display:flex;gap:9px;align-items:center;cursor:pointer;font-size:13.5px;
  font-family:var(--font-display);font-weight:600;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 11px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.pcr__clave:hover{border-color:var(--accent)}
.pcr__clave:has(.pcr__check:checked){border-color:var(--accent-deep);background:var(--tint)}
.pcr__check{width:15px;height:15px;accent-color:var(--accent-deep)}
.pcr__num{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep)}
.pcr__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  padding:8px 12px;border-radius:var(--radius-pill);border:1px dashed var(--line-soft);
  background:var(--bg-paper);transition:border-color .2s var(--ease)}
.pcr__btn:hover{border-color:var(--accent)}
.pcr__salida{display:grid;gap:10px}
.pcr__prompt{background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:16px 18px;min-height:120px;
  font-size:14.5px;line-height:1.65;box-shadow:var(--shadow-card)}
.pcr__base{font-family:var(--font-serif);font-style:italic;color:var(--text-secondary)}
.pcr__pieza{border-radius:4px;transition:background .5s var(--ease)}
.pcr__pieza.is-nueva{background:var(--tint)}
.pcr__caja{border-left:4px solid var(--c,var(--line-soft));border-radius:6px;
  background:var(--cf,transparent);padding:6px 10px;margin:6px 0}
.pcr__caja[data-color="tech"]{--c:var(--accent-tech-deep);--cf:var(--tint-tech)}
.pcr__caja[data-color="sage"]{--c:var(--accent-sage-deep);--cf:var(--tint-sage)}
.pcr__caja[data-color="human"]{--c:var(--accent-human-deep);--cf:var(--tint-human)}
.pcr__caja[data-color="lime"]{--c:var(--accent-lime-deep);--cf:var(--tint-lime)}
.pcr__caja-tag{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--c)}
.pcr__meter{height:10px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:999px;overflow:hidden}
.pcr__meter-fill{height:100%;width:0;background:var(--accent-deep);border-radius:999px;
  transition:width .5s var(--ease),background .5s var(--ease)}
.pcr__meter-fill.is-plena{background:var(--bg-ink)}
.pcr__nivel{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
@media (max-width:760px){.pcr__paneles{grid-template-columns:1fr}}

/* ---------- Plantilla XML rellenable ---------- */
.plx{display:grid;gap:12px;margin-top:14px;border-top:1px solid var(--line-hair);padding-top:16px}
.plx__intro{font-size:13.5px;color:var(--text-secondary);max-width:70ch}
.plx__cajas{display:grid;gap:8px}
.plx__caja{border:1px solid var(--line-soft);border-left:4px solid var(--c);
  background:var(--cf);border-radius:var(--radius-sm);padding:8px 12px 10px}
.plx__caja[data-color="tech"]{--c:var(--accent-tech-deep);--cf:var(--tint-tech)}
.plx__caja[data-color="sage"]{--c:var(--accent-sage-deep);--cf:var(--tint-sage)}
.plx__caja[data-color="human"]{--c:var(--accent-human-deep);--cf:var(--tint-human)}
.plx__caja[data-color="lime"]{--c:var(--accent-lime-deep);--cf:var(--tint-lime)}
.plx__head{display:flex;align-items:center;justify-content:space-between}
.plx__tag{font-family:var(--font-mono);font-size:12px;color:var(--c);font-weight:700}
.plx__tag--cierre{opacity:1}
.plx__x{cursor:pointer;border:none;background:transparent;font-size:17px;line-height:1;
  color:var(--text-secondary);padding:2px 6px;border-radius:6px;min-width:28px;min-height:28px;
  display:inline-flex;align-items:center;justify-content:center}
.plx__x:hover{background:var(--line-hair);color:var(--text-primary)}
.plx__caja textarea{width:100%;border:0;background:transparent;resize:vertical;
  min-height:40px;font-family:var(--font-body);font-size:16px;color:var(--text-primary);
  outline:none;padding:4px 0}
.plx__barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.plx__chips{display:flex;gap:6px;flex-wrap:wrap}
.plx__chip{cursor:pointer;font-family:var(--font-mono);font-size:12px;
  border:1px dashed var(--line-soft);background:var(--bg-paper);border-radius:999px;
  padding:5px 11px;color:var(--text-secondary);transition:border-color .2s var(--ease)}
.plx__chip:hover{border-color:var(--accent);color:var(--text-primary)}
.plx__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line-soft);
  background:var(--bg-paper);transition:border-color .2s var(--ease)}
.plx__btn:hover{border-color:var(--accent)}
.plx__btn--pri{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink);margin-left:auto}
.plx__btn--pri:hover{opacity:.88}

/* ============================================================================
   Revisión visual · Bloque 03 «Modelos y tokens» (accent lime)
   panel-mandos · escala-tokens
============================================================================ */
/* ---------- El panel de mandos ---------- */
.pm{display:grid;gap:16px;margin-top:6px;max-width:820px}
.pm__mandos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pm__mando{display:grid;gap:8px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:12px 14px}
.pm__label{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary)}
.pm__label b{color:var(--accent-deep)}
.pm__slider{width:100%;accent-color:var(--accent-deep);cursor:pointer;height:28px}
.pm__medidores{display:grid;gap:9px}
.pm__med{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px}
.pm__med>span{font-family:var(--font-mono);font-size:12.5px}
.pm__track{height:20px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:999px;overflow:hidden}
.pm__fill{height:100%;width:0;background:var(--accent-deep);border-radius:999px;
  transition:width .5s var(--ease)}
.pm__fill--gasto{background:var(--accent-human-deep)}
.pm__frase{background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:14px;min-height:42px;transition:background .3s var(--ease)}
.pm__frase.is-dato{background:var(--tint);border-color:var(--accent-deep);font-weight:600}

/* ---------- La escala real de tokens ---------- */
.esc{display:grid;gap:12px;margin-top:8px;max-width:900px}
.esc__row{display:grid;grid-template-columns:220px 1fr 170px;align-items:center;gap:12px}
.esc__row.is-ref .esc__fill{background:var(--bg-ink)}
.esc__row.is-ref .esc__nombre{font-weight:700}
.esc__nombre{font-family:var(--font-display);font-weight:600;font-size:14px;text-align:right;
  display:flex;align-items:center;justify-content:flex-end;gap:8px}
.esc__icono{font-size:18px}
.esc__track{height:24px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:999px;overflow:hidden}
.esc__fill{height:100%;width:0;background:var(--accent-deep);border-radius:999px;
  transition:width .7s var(--ease)}
.esc__dato{display:grid;line-height:1.25}
.esc__dato b{font-family:var(--font-mono);font-size:13px}
.esc__dato span{font-size:11.5px;color:var(--text-secondary)}
.esc__pie{font-size:12.5px;color:var(--text-secondary);font-family:var(--font-mono);margin:4px 0 0}
@media (max-width:760px){
  .esc__row{grid-template-columns:1fr;gap:4px}
  .esc__nombre{text-align:left;justify-content:flex-start}
  .pm__med{grid-template-columns:96px 1fr}
}

/* ============================================================================
   Revisión visual · Bloques 04 (sage) · 05 (tech) · 06 (human)
   transcripcion-acta · arrastra-suelta · retoca-logo · tres-envoltorios
============================================================================ */
/* ---------- De la transcripción al acta ---------- */
.ta{display:grid;gap:12px;margin-top:14px;border-top:1px solid var(--line-hair);padding-top:16px;max-width:780px}
.ta__panel{transition:opacity .17s var(--ease)}
.ta__panel.is-cambiando{opacity:0}
.ta__cruda{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:16px 18px;margin:0;font-family:var(--font-serif);font-style:italic;font-size:14px;
  line-height:1.7;color:var(--text-secondary);box-shadow:var(--shadow-card)}
.ta__acta{background:var(--bg-paper);border:1px solid var(--accent);border-radius:var(--radius-md);
  padding:16px 18px;box-shadow:var(--shadow-card)}
.ta__acta h4{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0 0 6px}
.ta__acta p{font-size:13.5px;color:var(--text-secondary);margin:0 0 10px}
.ta__tabla{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
.ta__tabla th{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--accent-deep);text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--line-soft);background:var(--tint)}
.ta__tabla td{padding:6px 8px;border-bottom:1px solid var(--line-hair)}
.ta__correo{background:var(--bg-white);border:1px dashed var(--line-soft);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:13px;line-height:1.5}
.ta__correo-tag{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent-deep);margin-bottom:4px}

/* ---------- Arrastra y suelta ---------- */
.as{display:grid;gap:14px;margin-top:6px;max-width:820px}
.as__fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.as__ficha{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-display);
  font-weight:600;font-size:13px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:10px 12px;color:var(--text-primary);text-align:left;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.as__ficha:hover{border-color:var(--accent);transform:translateY(-2px)}
.as__ficha:active{transform:scale(.97)}
.as__icono{font-size:18px}
.as__chat{border:2px dashed var(--line-soft);border-radius:var(--radius-lg);padding:16px 18px;
  background:var(--bg-paper);transition:border-color .25s var(--ease),background .25s var(--ease)}
.as__chat.is-sobre,.as__chat.is-recibe{border-color:var(--accent);background:var(--tint)}
.as__chat-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary);margin-bottom:8px}
.as__out{font-size:15px;min-height:26px}

/* ---------- Retoca el logo por palabras ---------- */
.rl{display:grid;gap:12px;margin-top:14px;border-top:1px solid var(--line-hair);padding-top:16px;max-width:760px}
.rl__escena{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.rl__lienzo{background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:14px 22px;box-shadow:var(--shadow-card);transition:background .3s var(--ease)}
.rl__lienzo.is-oscuro{background:var(--bg-ink)}
.rl__lienzo svg{display:block;max-width:100%;height:auto;transition:width .3s var(--ease)}
.rl__lienzo svg *{transition:fill .3s var(--ease),stroke .3s var(--ease)}
.rl__botones{display:flex;flex-direction:column;gap:7px}
.rl__btn{cursor:pointer;font-family:var(--font-serif);font-style:italic;font-size:14px;
  padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--line-soft);
  background:var(--bg-paper);color:var(--text-primary);text-align:left;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.rl__btn:hover{border-color:var(--accent)}
.rl__btn.is-on{background:var(--tint);border-color:var(--accent-deep)}
.rl__btn--reset{font-family:var(--font-display);font-style:normal;font-size:12.5px;border-style:dashed}
.rl__codigo summary{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);cursor:pointer}
.rl__codigo pre{font-family:var(--font-mono);font-size:12.5px;line-height:1.5;background:var(--bg-paper);
  border:1px solid var(--line-hair);border-radius:var(--radius-sm);padding:10px 12px;
  overflow-x:auto;margin:6px 0 0}
.rl__pie{font-size:13px;color:var(--text-secondary);margin:0}

/* ---------- Tres envoltorios, el mismo dato ---------- */
.te{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:6px}
.te__panel{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:10px 12px;box-shadow:var(--shadow-card)}
.te__nombre{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent-deep);margin-bottom:8px}
.te__pre{font-family:var(--font-mono);font-size:13px;line-height:1.7;margin:0;overflow-x:auto}
.te__gris{color:var(--text-secondary)}
.te__linea{display:inline-block;border-radius:4px;padding:3px;cursor:default;transition:background .2s var(--ease)}
.te__linea.is-on{background:var(--tint);outline:1px solid var(--accent)}
.te__pie{grid-column:1/-1;font-size:13px;color:var(--text-secondary);margin:2px 0 0;min-height:20px}

/* ---------- La línea del cutoff (la habitación cerrada, bloque 00) ---------- */
.lcut{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.lcut__linea{display:flex;align-items:stretch;margin-top:12px}   /* aire para la etiqueta del corte */
.lcut__zona{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:14px 16px;
  border-radius:var(--radius-lg);transition:background .5s var(--ease),border-color .5s var(--ease),opacity .5s var(--ease)}
.lcut__zona--saber{background:var(--tint);border:1px solid var(--accent)}
.lcut__zona--despues{background:var(--bg-paper);border:1px dashed var(--line-soft)}
.lcut__zona--despues .lcut__ico{filter:grayscale(1);opacity:.55;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.lcut__zona--despues.is-web{background:var(--tint);border:1px solid var(--accent);opacity:1}
.lcut__zona--despues.is-web .lcut__ico{filter:none;opacity:1}
.lcut__cab{display:flex;align-items:center;gap:9px}
.lcut__ico{font-size:22px}
.lcut__zt{font-family:var(--font-display);font-weight:800;font-size:15px}
.lcut__zs{font-size:13.5px;color:var(--text-secondary)}
.lcut__hitos{display:flex;gap:12px;font-size:19px;margin-top:auto}
.lcut__corte{flex:0 0 auto;width:3px;margin:0 16px;border-radius:2px;background:var(--accent-deep);position:relative}
.lcut__corte-tag{position:absolute;top:0;left:50%;transform:translate(-50%,calc(-100% - 5px));white-space:nowrap;
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--bg-ink);color:var(--text-on-ink);padding:4px 11px;border-radius:var(--radius-pill);z-index:1}
.lcut__fuentes{display:flex;flex-wrap:wrap;gap:6px;min-height:31px;margin-top:auto}
.lcut__fuente{font-size:12.5px;padding:6px 11px;border-radius:var(--radius-pill);background:var(--bg-paper);
  border:1px solid var(--accent);color:var(--accent-deep);opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.lcut__fuente.is-in{opacity:1;transform:none}
.lcut__acciones{display:flex;gap:8px;flex-wrap:wrap}
.lcut__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:var(--radius-pill);padding:8px 14px;
  transition:all .2s var(--ease)}
.lcut__btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.lcut__btn.is-on{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.lcut__btn.is-ghost{background:transparent}
.lcut__nota{font-size:13.5px;color:var(--text-secondary);min-height:20px}
@media (max-width:700px){
  .lcut__linea{flex-direction:column}
  .lcut__corte{width:auto;height:3px;margin:16px 0}
  .lcut__corte-tag{top:50%;transform:translate(-50%,-50%)}   /* en columna, la etiqueta va sobre la propia línea */
}

/* ---------- ¿Qué IA uso para esto? (el mapa de prácticas, bloque 02) ----------
   Reescrita en sept 2026: ahora la demo pregunta antes de revelar, así que las
   tarjetas de IA son BOTONES (la apuesta del alumno) y hay un panel de respuesta. */
.qiu{display:flex;flex-direction:column;gap:18px;margin-top:6px}
.qiu__z1,.qiu__z2,.qiu__z3{display:grid;gap:10px}
.qiu__z3{border-top:1px solid var(--line-hair);padding-top:14px}
.qiu__z2{border-top:1px solid var(--line-hair);padding-top:14px}
.qiu__txt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.qiu__n{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent-deep);
  background:var(--bg-canvas);border-radius:var(--radius-pill);padding:2px 7px}
.qiu__grupo{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary);flex-basis:100%}
.qiu__acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qiu__resp{background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:14px 16px;display:grid;gap:8px}
.qiu__vd{margin:0;font-size:13.5px;color:var(--text-secondary)}
.qiu__vd.is-ok{color:var(--accent-deep);font-weight:600}
.qiu__fila{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.qiu__et{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text-secondary);min-width:150px}
.qiu__val{font-size:15px}
strong.qiu__val{font-size:17px;color:var(--accent-deep)}
.qiu__motivo{margin:0;font-size:14.5px}
.qiu__ir{font-family:var(--font-display);font-weight:600;font-size:13.5px;
  color:var(--accent-deep);text-decoration:none;justify-self:start}
.qiu__ir:hover{text-decoration:underline}
.qiu__tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep)}
.qiu__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.qiu__tarea{display:flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--font-display);
  font-weight:600;font-size:13px;min-height:44px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:9px 12px;
  color:var(--text-primary);text-align:left;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.qiu__tarea:hover{border-color:var(--accent)}
.qiu__tarea.is-on{background:var(--tint);border-color:var(--accent-deep)}
.qiu__ico{font-size:18px;line-height:1}
.qiu__ias{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qiu__ia{display:flex;flex-direction:column;gap:6px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:14px 16px;
  box-shadow:var(--shadow-card);cursor:pointer;text-align:left;color:var(--text-primary);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.qiu__ia:hover{border-color:var(--accent)}
.qiu__ia.is-on{background:var(--tint);border-color:var(--accent);transform:scale(1.02)}
.qiu__ia:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.qiu__lvl{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-deep);background:var(--bg-canvas);border-radius:var(--radius-pill);
  padding:4px 10px;align-self:flex-start}   /* estilo .comp__lvl, a 13px para el fondo del aula */
.qiu__nombre{font-family:var(--font-display);font-weight:800;font-size:19px}
.qiu__porque{font-size:14.5px;margin:0;min-height:22px}
.qiu__porque strong{color:var(--accent-deep)}
.qiu__fija{font-size:12.5px;color:var(--text-secondary);margin:0}
.qiu__form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qiu__input{flex:1;min-width:210px;font:inherit;font-size:14px;padding:9px 14px;
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);background:var(--bg-white);
  color:var(--text-primary)}
.qiu__input:focus{outline:none;border-color:var(--accent)}
.qiu__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:var(--radius-pill);
  padding:8px 14px;transition:all .2s var(--ease)}
.qiu__btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.qiu__btn.is-ghost{background:transparent}
.qiu__btn[disabled]{opacity:.5;cursor:default}
@media (max-width:980px){.qiu__ias{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.qiu__ias{grid-template-columns:1fr}.qiu__et{min-width:0}}
@media (prefers-reduced-motion:reduce){
  .qiu__tarea,.qiu__ia,.qiu__btn{transition:none}
  .qiu__ia.is-on{transform:none}   /* el estado cambia igual; solo se quita el movimiento */
}

/* ---------- Elige y revela (bloque 02, una pieza para nueve slides) ---------- */
.er{display:grid;gap:12px;margin-top:6px}
.er__preg{margin:0;font-family:var(--font-display);font-weight:700;font-size:16.5px}
.er__ops{display:flex;flex-wrap:wrap;gap:8px}
.er__op{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:14px;
  background:var(--bg-paper);color:var(--text-primary);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:10px 18px;min-height:44px;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.er__op:hover{border-color:var(--accent)}
.er__op.is-on{background:var(--tint);border-color:var(--accent-deep)}
.er__op:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.er__out{background:var(--bg-paper);border:1px solid var(--line-soft);
  border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:14px 16px;display:grid;gap:8px}
.er__revela{margin:0;font-size:15.5px}
.er__cierre{margin:0;font-size:13.5px;color:var(--text-secondary)}
.er__falta{margin:0;font-size:13px;color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){.er__op{transition:none}}

/* ---------- Mi elección para mañana (bloque 02, cierre) ---------- */
.mel{display:grid;gap:14px;margin-top:6px}
.mel__campos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mel__campo{display:grid;gap:6px}
.mel__et{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--accent-deep)}
.mel__in{font:inherit;font-size:14.5px;padding:10px 13px;resize:vertical;
  border:1px solid var(--line-soft);border-radius:var(--radius-md);
  background:var(--bg-white);color:var(--text-primary)}
.mel__in:focus{outline:none;border-color:var(--accent)}
.mel__acciones{display:flex;gap:8px;flex-wrap:wrap}
.mel__btn{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:var(--bg-paper);border-radius:var(--radius-pill);
  padding:9px 16px;min-height:40px;transition:all .2s var(--ease)}
.mel__btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.mel__btn.is-ghost{background:transparent}
.mel__pie{margin:0;font-size:12.5px;color:var(--text-secondary)}
@media (max-width:760px){.mel__campos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mel__btn{transition:none}}

/* ============================================================================
   Revisión visual · Bloque 00b «El chat por dentro» (accent lime)
   por-donde-entro · mapa-del-chat
============================================================================ */
/* ---------- ¿Por dónde entro a Claude? (los tres hogares) ---------- */
.pde{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.pde__tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep)}
.pde__necesidades .pred__btn{font-size:13.5px}
.pde__casas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pde__casa{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:18px 12px 14px;opacity:.45;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.pde__casa.is-encendida{opacity:1;background:var(--tint);border-color:var(--accent);
  box-shadow:var(--shadow-card);transform:scale(1.02)}
.pde__ico{font-size:30px;filter:grayscale(1);transition:filter .3s var(--ease)}
.pde__casa.is-encendida .pde__ico{filter:none}
.pde__casa-t{font-family:var(--font-display);font-weight:800;font-size:16px}
.pde__casa-s{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-secondary);line-height:1.5}
.pde__why{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:14px 18px;min-height:82px;transition:opacity .18s var(--ease)}
.pde__why.is-cambiando{opacity:0}
.pde__badge{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent-deep);background:var(--tint);
  border:1px solid var(--accent);border-radius:var(--radius-pill);padding:4px 11px;margin-bottom:8px}
.pde__badge[hidden]{display:none}  /* el inline-block le ganaria al atributo hidden */
.pde__texto{font-size:14.5px;color:var(--text-secondary);margin:0;line-height:1.5}
.pde__pie{font-size:12.5px;color:var(--text-secondary);border-top:1px solid var(--line-hair);padding-top:10px}
@media (max-width:760px){.pde__casas{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .pde__casa,.pde__ico,.pde__why{transition:none}
  .pde__casa.is-encendida{transform:none}
}

/* ---------- El mapa del chat (tour del panel, mockup estilizado) ---------- */
.mdc{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.mdc__ventana{display:grid;grid-template-columns:190px 1fr;background:var(--bg-white);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.mdc__side{display:flex;flex-direction:column;gap:8px;background:var(--bg-paper);
  border-right:1px solid var(--line-soft);padding:12px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.mdc__side-item{font-size:12.5px;color:var(--text-secondary)}
.mdc__side-cap{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);margin-top:6px}
.mdc__skel{height:8px;border-radius:var(--radius-pill);background:var(--line-soft)}
.mdc__main{display:flex;flex-direction:column;gap:10px;padding:12px 14px;min-width:0}
.mdc__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mdc__logo{font-family:var(--font-display);font-weight:800;font-size:13px}
.mdc__modelo{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);padding:5px 10px;background:var(--bg-paper);
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.mdc__temp{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:15px;
  border:1px dashed var(--line-soft);border-radius:var(--radius-pill);padding:4px 9px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.mdc__hilo{display:flex;flex-direction:column;gap:8px;min-height:88px;justify-content:center}
.mdc__msg{display:flex;flex-direction:column;gap:6px;border-radius:var(--radius-md);padding:10px 12px}
.mdc__msg.is-user{align-self:flex-end;width:44%;background:var(--tint)}
.mdc__msg.is-ia{align-self:flex-start;width:68%;background:var(--bg-paper);border:1px solid var(--line-hair)}
.mdc__caja{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:12px 14px;background:var(--bg-paper);
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.mdc__caja-txt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-serif);
  font-style:italic;font-size:14px;color:var(--text-secondary)}
.mdc__caja-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mdc__mas{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);padding:3px 9px;background:var(--bg-white);
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.mdc__envia{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent-deep);color:var(--text-on-ink);font-size:13px}
.mdc [data-zona].is-activa{background:var(--tint);box-shadow:0 0 0 2px var(--accent)}
.mdc__punto{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;background:transparent;
  padding:2px;opacity:0;transform:translateY(4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mdc__punto.is-in{opacity:1;transform:none}
.mdc__num{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-mono);font-weight:700;font-size:12.5px;background:var(--bg-white);
  color:var(--accent-deep);border:2px solid var(--accent);
  transition:background .2s var(--ease),color .2s var(--ease)}
.mdc__punto.is-on .mdc__num{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--text-on-ink)}
.mdc__plbl{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-deep);background:var(--tint);border-radius:var(--radius-pill);padding:3px 8px;white-space:nowrap}
.mdc__card{display:flex;gap:12px;align-items:flex-start;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:14px 16px;min-height:74px;
  transition:opacity .18s var(--ease)}
.mdc__card.is-cambiando{opacity:0}
.mdc__card-num{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  font-family:var(--font-mono);font-weight:700;font-size:13px;background:var(--accent-deep);color:var(--text-on-ink)}
.mdc__card-t{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0 0 4px}
.mdc__card-x{font-size:13.5px;color:var(--text-secondary);margin:0;line-height:1.5}
.mdc__pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-hair);padding-top:10px}
.mdc__nota{font-size:12.5px;color:var(--text-secondary);flex:1;min-width:220px}
.mdc__replay{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:transparent;border-radius:var(--radius-pill);padding:7px 13px;
  transition:all .2s var(--ease)}
.mdc__replay:hover{border-color:var(--accent);color:var(--accent-deep)}
@media (max-width:700px){
  .mdc__ventana{grid-template-columns:1fr}
  .mdc__side{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid var(--line-soft)}
  .mdc__side .mdc__skel,.mdc__side .mdc__side-cap{display:none}
  .mdc__msg{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mdc__punto,.mdc__num,.mdc__card,.mdc [data-zona]{transition:none}
}

/* ---------- Con web / sin web (memoria vs fuente viva) ---------- */
.cwsw{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.cwsw__chat{display:flex;flex-direction:column;gap:10px}
.cwsw__q{align-self:flex-end;max-width:78%;display:flex;align-items:baseline;gap:10px;
  background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:12px 16px;font-size:15px}
.cwsw__q-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent-deep);flex:0 0 auto}
.cwsw__a{align-self:flex-start;width:100%;max-width:860px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px 18px;box-shadow:var(--shadow-card)}
.cwsw__a-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cwsw__logo{font-family:var(--font-display);font-weight:800;font-size:13px}
.cwsw__badge{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;border-radius:var(--radius-pill);padding:4px 11px}
.cwsw__badge.is-memoria{color:var(--text-secondary);background:var(--bg-canvas);border:1px dashed var(--line-soft)}
.cwsw__badge.is-web{color:var(--accent-deep);background:var(--tint);border:1px solid var(--accent)}
.cwsw__busca{font-family:var(--font-serif);font-style:italic;font-size:14.5px;color:var(--text-secondary);
  min-height:44px;display:flex;align-items:center}
.cwsw__busca[hidden]{display:none}   /* el display:flex le ganaba al atributo hidden */
.cwsw__dots{display:inline-flex;margin-left:6px}
.cwsw__dots i{width:6px;height:6px;border-radius:50%;background:var(--accent-deep);margin-left:4px;
  animation:cwswDot 1s var(--ease) infinite}
.cwsw__dots i:nth-child(2){animation-delay:.15s}
.cwsw__dots i:nth-child(3){animation-delay:.3s}
@keyframes cwswDot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.cwsw__resp{font-size:14.5px;margin:0;line-height:1.55}
.cwsw__aviso{font-size:13px;color:var(--text-secondary);background:var(--bg-canvas);
  border:1px dashed var(--line-soft);border-radius:var(--radius-md);padding:9px 12px}
.cwsw__f-tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep);margin-bottom:8px}
.cwsw__f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.cwsw__fuente{display:flex;flex-direction:column;gap:4px;background:var(--bg-white);
  border:1px solid var(--accent);border-radius:var(--radius-md);padding:10px 12px;
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cwsw__fuente.is-in{opacity:1;transform:none}
.cwsw__f-ico{font-size:17px;line-height:1}
.cwsw__f-tit{font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1.35}
.cwsw__f-dom{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.cwsw__pie{font-size:12.5px;color:var(--text-secondary);border-top:1px solid var(--line-hair);padding-top:10px}
@media (max-width:700px){.cwsw__q{max-width:100%}}
@media (prefers-reduced-motion:reduce){
  .cwsw__dots i{animation:none}
  .cwsw__fuente{transition:none}
}

/* ---------- Research fan-out (encargo → ayudantes en paralelo → informe) ---------- */
.rfo{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.rfo__arbol{display:flex;flex-direction:column;align-items:stretch}
.rfo__raiz{align-self:center;max-width:620px;display:flex;flex-direction:column;gap:6px;text-align:center;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px 18px;opacity:.45;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.rfo__raiz.is-encendida{opacity:1;background:var(--tint);border-color:var(--accent);box-shadow:var(--shadow-card)}
.rfo__raiz-tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep)}
.rfo__raiz-txt{font-family:var(--font-serif);font-style:italic;font-size:14px;line-height:1.45}
.rfo__stub{width:3px;height:14px;margin:0 auto;border-radius:var(--radius-pill);background:var(--line-soft);
  flex:0 0 auto;transition:background .4s var(--ease)}
.rfo__stub.is-encendida{background:var(--accent)}
.rfo__bus{height:3px;margin:0 12.5%;border-radius:var(--radius-pill);background:var(--line-soft);
  transition:background .4s var(--ease)}
.rfo__bus.is-encendida{background:var(--accent)}
.rfo__fila{display:flex;gap:12px;align-items:stretch}
.rfo__col{flex:1;min-width:0;display:flex;flex-direction:column}
.rfo__ayu{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:13px 10px;opacity:.45;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.rfo__ayu.is-encendida{opacity:1;background:var(--tint);border-color:var(--accent);box-shadow:var(--shadow-card)}
.rfo__ayu-ico{font-size:20px;line-height:1;filter:grayscale(1);transition:filter .4s var(--ease)}
.rfo__ayu.is-encendida .rfo__ayu-ico{filter:none}
.rfo__ayu-t{font-family:var(--font-display);font-weight:700;font-size:13.5px;line-height:1.3}
.rfo__ayu-dom{font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary)}
.rfo__informe{align-self:center;width:min(560px,100%);display:flex;flex-direction:column;gap:8px;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px 18px;opacity:.45;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.rfo__informe.is-encendida{opacity:1;background:var(--bg-white);border-color:var(--accent);box-shadow:var(--shadow-card)}
.rfo__informe-t{font-family:var(--font-display);font-weight:800;font-size:14.5px}
.rfo__skel{height:8px;border-radius:var(--radius-pill);background:var(--line-soft)}
.rfo__citas{display:flex;flex-wrap:wrap;gap:6px;min-height:29px;margin-top:2px}
.rfo__cita{font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:var(--radius-pill);
  background:var(--tint);border:1px solid var(--accent);color:var(--accent-deep);
  opacity:0;transform:translateY(5px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rfo__cita.is-in{opacity:1;transform:none}
.rfo__caption{background:var(--bg-paper);border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  border-radius:var(--radius-md);padding:12px 16px;min-height:48px}
.rfo__caption-t{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent-deep);margin-bottom:4px}
.rfo__caption-x{font-size:14px;color:var(--text-secondary);line-height:1.5}
.rfo__pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-hair);padding-top:10px}
.rfo__nota{font-size:12.5px;color:var(--text-secondary);flex:1;min-width:220px}
.rfo__replay{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:13px;
  border:1px solid var(--line-soft);background:transparent;border-radius:var(--radius-pill);padding:7px 13px;
  transition:all .2s var(--ease)}
.rfo__replay:hover{border-color:var(--accent);color:var(--accent-deep)}
@media (max-width:760px){
  .rfo__fila{flex-direction:column;gap:8px}
  .rfo__bus,.rfo__stub--arriba,.rfo__stub--abajo{display:none}
  .rfo__ayu{flex-direction:row;text-align:left;padding:11px 14px;gap:10px}
  .rfo__ayu-dom{margin-left:auto}
  .rfo__stub--raiz,.rfo__stub--informe{height:12px;margin:4px auto}
  .rfo__stub--informe{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .rfo__raiz,.rfo__ayu,.rfo__ayu-ico,.rfo__informe,.rfo__stub,.rfo__bus,.rfo__cita{transition:none}
}

/* ---------- Las teclas del chat (parar · editar · recargar · copiar) ---------- */
.tcl{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.tcl__hilo{display:flex;flex-direction:column;gap:10px}
.tcl__msg--user{align-self:flex-end;max-width:78%;display:flex;align-items:baseline;gap:10px;
  background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:12px 16px;font-size:15px}
.tcl__tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary);flex:0 0 auto}
.tcl__msg--ia{align-self:flex-start;width:100%;max-width:860px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:14px 18px;box-shadow:var(--shadow-card)}
.tcl__logo{font-family:var(--font-display);font-weight:800;font-size:13px}
.tcl__resp{font-size:14.5px;margin:0;line-height:1.55;color:var(--text-secondary)}
.tcl__cursor{color:var(--accent-deep);margin-left:2px}
.tcl__teclas{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line-hair);padding-top:10px}
.tcl__tecla{cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--text-primary);
  border:1px solid var(--line-soft);background:var(--bg-white);border-radius:var(--radius-pill);
  padding:7px 13px;transition:all .2s var(--ease)}
.tcl__tecla:hover{border-color:var(--accent);color:var(--accent-deep)}
.tcl__tecla.is-on{background:var(--bg-ink);border-color:var(--bg-ink);color:var(--text-on-ink)}
.tcl__card{display:flex;gap:12px;align-items:flex-start;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:14px 16px;min-height:118px;
  transition:opacity .18s var(--ease)}
.tcl__card.is-cambiando{opacity:0}
.tcl__card-ico{font-size:22px;line-height:1.25;flex:0 0 auto}
.tcl__card-t{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0 0 4px}
.tcl__card-x{font-size:13.5px;color:var(--text-secondary);margin:0 0 8px;line-height:1.5}
.tcl__card-ej{display:flex;align-items:baseline;gap:8px;margin:0;font-family:var(--font-serif);
  font-style:italic;font-size:13.5px;line-height:1.5}
.tcl__ej-tag{font-family:var(--font-mono);font-style:normal;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);
  background:var(--tint);border-radius:var(--radius-pill);padding:3px 8px;white-space:nowrap;flex:0 0 auto}
.tcl__pie{font-size:12.5px;color:var(--text-secondary);border-top:1px solid var(--line-hair);padding-top:10px}
@media (max-width:700px){
  .tcl__msg--user{max-width:100%}
  .tcl__card{min-height:0}
  .tcl__card-ej{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .tcl__tecla,.tcl__card{transition:none}
}

/* ---------- Chat normal / chat temporal (el incógnito) ---------- */
.ctd{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.ctd__panel{display:flex;flex-direction:column;gap:12px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:16px 18px;
  box-shadow:var(--shadow-card);
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ctd__panel.is-temporal{background:var(--bg-canvas);border:1px dashed var(--text-secondary);box-shadow:none}
.ctd__cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctd__badge{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;border-radius:var(--radius-pill);padding:4px 11px;
  color:var(--text-secondary);background:var(--tint);border:1px solid var(--accent)}
.ctd__panel.is-temporal .ctd__badge{color:var(--text-secondary);background:var(--bg-white);border:1px dashed var(--line-soft)}
.ctd__lema{font-family:var(--font-serif);font-style:italic;font-size:14.5px}
.ctd__lista{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;
  transition:opacity .18s var(--ease)}
.ctd__lista.is-cambiando{opacity:0}
.ctd__item{display:flex;align-items:baseline;gap:10px;background:var(--bg-white);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:10px 14px}
.ctd__panel.is-temporal .ctd__item{border-style:dashed}
.ctd__mark{flex:0 0 auto;font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--text-secondary)}
.ctd__mark.is-no{color:var(--text-secondary)}
.ctd__lbl{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-secondary);flex:0 0 150px}
.ctd__val{font-size:13.5px;color:var(--text-secondary);line-height:1.5;flex:1}
.ctd__pie{font-size:12.5px;color:var(--text-secondary);border-top:1px solid var(--line-hair);padding-top:10px}
@media (max-width:700px){
  .ctd__item{flex-wrap:wrap}
  .ctd__lbl{flex-basis:calc(100% - 24px)}
}
@media (prefers-reduced-motion:reduce){
  .ctd__panel,.ctd__lista{transition:none}
}

/* ---------- Compositor de cursos (Fase 18c · panel admin) ---------- */
.cmp__lista{display:grid;gap:6px;min-height:60px}
.cmp__lista--sobre{outline:2px dashed var(--accent-deep);outline-offset:3px;border-radius:var(--radius-md)}
.cmp__fila{cursor:grab}
/* 20d · compositor a pantalla partida: LIBRERÍA | EL CURSO */
.cmp__split{display:flex;gap:16px;align-items:flex-start;margin-top:6px}
.cmp__col{flex:1;min-width:0}
.cmp__col--paleta{flex:0 0 40%}
.cmp__col-cab{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-secondary);margin-bottom:8px}
.cmp__pbusca{margin-bottom:8px}
.cmp__paleta-lista{border:1px dashed var(--line-soft);border-radius:var(--radius-md);
  background:var(--bg-canvas);padding:8px;max-height:440px;overflow-y:auto}
.cmp__pfam{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-secondary);margin:10px 2px 5px}
.cmp__pfam:first-child{margin-top:2px}
.cmp__pfila{display:flex;align-items:center;gap:8px;padding:6px 9px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);margin-bottom:4px;cursor:grab}
.cmp__pfila.is-drag{opacity:.45}
.cmp__pfila--lib{border-left:3px solid var(--accent-sage-deep)}
.cmp__pfila--form{border-left:3px solid var(--accent-human-deep)}
.cmp__pnum{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);min-width:24px}
.cmp__ptit{flex:1;font-size:13.5px}
.cmp__pacc{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft)}
@media (max-width:720px){ .cmp__split{flex-direction:column} .cmp__col,.cmp__col--paleta{flex:1 1 auto;width:100%} }
/* Curso automático (sin selección propia): bloques en gris, no editables */
.cmp__fila--auto{cursor:default;display:flex;align-items:center;gap:10px;opacity:.72;
  background:var(--bg-canvas);border:1px dashed var(--line-soft);
  border-radius:var(--radius-sm);padding:7px 10px}
.cmp__auto-tit{flex:1}
.cmp__auto-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-secondary);border:1px solid var(--line-soft);
  border-radius:999px;padding:2px 8px}
/* Librería de bloques (PLAN/20b · solo lectura) */
.blib__filtros{display:flex;gap:10px;margin:6px 0 12px;flex-wrap:wrap}
.blib__busca{flex:1;min-width:200px}
.blib__filtros select{max-width:240px}
.blib__fam{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-secondary);margin:16px 0 8px;
  padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
.blib__fam--sin{color:var(--accent-human-deep)}
.blib__notasin{padding:2px 2px 4px;font-style:italic}
.blib__bloque{border:1px solid var(--line-soft);border-radius:var(--radius-md);
  background:var(--bg-paper);margin-bottom:6px;overflow:hidden}
.blib__cab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:11px 14px;font:inherit;color:inherit}
.blib__cab:hover{background:var(--bg-canvas)}
.blib__num{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);min-width:26px}
.blib__tit{flex:1;font-weight:600}
.blib__meta{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.blib__chev{font-size:11px;color:var(--text-secondary);transition:transform .18s var(--ease)}
.blib__cab.is-open .blib__chev{transform:rotate(90deg)}
.blib__slides{border-top:1px solid var(--line-soft);padding:6px 0}
.blib__slide{display:flex;align-items:baseline;gap:10px;padding:4px 16px;font-size:13.5px}
.blib__stipo{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);
  min-width:74px;text-transform:uppercase}
.blib__stit{flex:1}
.blib__ssid{font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary)}
/* 20c · edición de la composición desde la librería */
.blib__tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-secondary);border:1px solid var(--line-soft);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.blib__tag--ov{border-color:var(--accent-sage-deep);color:var(--text-primary);background:var(--tint-sage)}
.blib__slide--rota{opacity:.6}
.blib__slide--rota .blib__stit{color:var(--accent-human-deep)}
.blib__acciones{display:flex;gap:8px;padding:10px 16px 12px;margin:0;border-top:1px solid var(--line-soft)}
.blib__nuevo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding:12px 14px;border:1px dashed var(--line-soft);border-radius:var(--radius-md);
  background:var(--bg-canvas)}
.blib__nuevo input{flex:1;min-width:200px}
.blib__nuevo select{max-width:180px}
.cmp__stit{flex:1}
.cmp__acc{display:flex;gap:4px;margin-left:auto}
.cmp__fila.is-drag{opacity:.45}
.cmp__fila.is-sobre{border-color:var(--accent-deep);box-shadow:0 0 0 2px var(--tint)}
.cmp__fila--manual{border-left:4px solid var(--accent-sage-deep)}
.cmp__fila--rota{border-left:4px solid var(--accent-human-deep);opacity:.7}
.cmp__asa{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);
  letter-spacing:-2px;cursor:grab;user-select:none}
.cmp__tipo{font-family:var(--font-mono);font-size:10.5px;background:var(--tint-tech);
  color:var(--accent-tech-deep);border-radius:999px;padding:2px 8px;white-space:nowrap}
.cmp__anadir{margin-top:10px;max-width:420px}
.cmp__slides{margin-top:14px;border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:14px 16px;background:var(--bg-canvas)}
.cmp__slides-cab{font-size:13.5px;margin-bottom:10px;color:var(--text-secondary)}
.cmp__slides-cab b{color:var(--text-primary)}
.cmp__fila--slide{cursor:grab;padding:5px 10px}
.cmp__busca{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;border-top:1px solid var(--line-hair);padding-top:12px}
.cmp__busca .ainput{width:auto;flex:1;min-width:150px}
.cmp__res{display:grid;gap:4px;margin-top:8px;max-height:260px;overflow-y:auto}

/* ============================================================================
   Ampliación G5 · Bloque 04 «Una fuente, cuatro redes» (accent sage)
   una-fuente-cuatro-redes — dos conmutadores (fuente × red) + reescritura
============================================================================ */
.ufcr{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.ufcr__fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ufcr__tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep);flex:0 0 auto;min-width:104px}
.ufcr .pred__btn{font-size:13.5px}
.ufcr__fuente{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:12px 16px;transition:opacity .18s var(--ease)}
.ufcr__fuente.is-cambiando{opacity:0}
.ufcr__fuente-tag{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:6px}
.ufcr__fuente-txt p{font-size:12.5px;color:var(--text-secondary);line-height:1.5;margin:0 0 7px}
.ufcr__fuente-txt p:last-child{margin-bottom:0}
.ufcr__out{background:var(--bg-white);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:14px 18px;box-shadow:var(--shadow-card);transition:opacity .18s var(--ease)}
.ufcr__out.is-cambiando{opacity:0}
.ufcr__out-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ufcr__red{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-primary);background:var(--tint);border-radius:var(--radius-pill);
  padding:4px 11px}
/* Honestidad de datos: solo X tiene límite oficial (280) — chip sólido;
   el resto son guías blandas (palabras, tiempo) — chip a trazos. */
.ufcr__medida{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);
  border:1px dashed var(--line-soft);border-radius:var(--radius-pill);padding:4px 11px;margin-left:auto}
.ufcr__medida.is-dura{border:1px solid var(--accent);color:var(--text-primary);background:var(--tint)}
.ufcr__texto p{font-size:14px;line-height:1.55;margin:0 0 10px}
.ufcr__texto p:last-child{margin-bottom:0}
.ufcr__texto p.ufcr__acot{font-family:var(--font-serif);font-style:italic;font-size:13px;
  color:var(--text-secondary)}
.ufcr__texto p.ufcr__tags{font-family:var(--font-mono);font-size:12.5px;color:var(--accent-deep)}
.ufcr__pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line-hair);
  padding-top:10px}
.ufcr__copy{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  border:1px solid var(--line-soft);background:var(--bg-white);border-radius:var(--radius-pill);
  padding:7px 13px;transition:all .2s var(--ease)}
.ufcr__copy:hover{border-color:var(--accent);background:var(--tint)}
.ufcr__lema{font-family:var(--font-serif);font-style:italic;font-size:12.5px;color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){
  .ufcr__fuente,.ufcr__out,.ufcr__copy{transition:none}
}

/* ============================================================================
   Ampliación G4 · Bloque 09 «De un folio a las diapositivas» (accent lime)
   folio-a-diapositivas — folio + recorrido de 4 paradas + autoverificación
============================================================================ */
.fad{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.fad [hidden]{display:none!important}   /* guardarraíl: el JS oculta con hidden */
.fad__fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fad__tag{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent-deep)}
.fad .pred__btn{font-size:13.5px}
.fad__cuerpo{display:grid;grid-template-columns:minmax(220px,290px) 1fr;gap:16px;align-items:start}
.fad__lado{display:flex;flex-direction:column;gap:8px;min-width:0}
/* El folio: tarjeta con aspecto de papel, etiqueta mono y contador al pie */
.fad__folio{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:12px 14px;box-shadow:var(--shadow-card)}
.fad__folio-tab{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--text-primary);background:var(--tint);border-radius:var(--radius-pill);
  padding:3px 10px;margin-bottom:8px}
.fad__folio-txt p{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:0 0 6px}
.fad__folio-txt p:last-child{margin-bottom:0}
.fad__folio-pie{font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);
  border-top:1px dashed var(--line-soft);margin-top:9px;padding-top:7px}
/* El recorrido: raíl de paradas + panel + barra */
.fad__viaje{display:flex;flex-direction:column;gap:10px;min-width:0}
.fad__rail{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0}
.fad__stop{display:flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--font-display);
  font-weight:600;font-size:12px;border:1px solid var(--line-soft);background:var(--bg-paper);
  border-radius:var(--radius-pill);padding:6px 12px 6px 6px;color:var(--text-secondary);
  transition:all .2s var(--ease)}
.fad__stop[disabled]{opacity:.45;cursor:default}
.fad__stop.is-vista{color:var(--text-primary);border-color:var(--accent)}
.fad__stop.is-on{background:var(--bg-ink);color:var(--text-on-ink);border-color:var(--bg-ink)}
.fad__stop-n{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--tint);color:var(--accent-deep);
  font-family:var(--font-mono);font-size:11px;font-weight:700;flex:0 0 auto}
.fad__stop.is-on .fad__stop-n{background:var(--accent);color:var(--bg-ink)}
.fad__panel{background:var(--bg-white);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:14px 18px;min-height:180px;box-shadow:var(--shadow-card);transition:opacity .16s var(--ease)}
.fad__panel.is-cambiando{opacity:0}
.fad__h{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent-deep);margin-bottom:8px}
.fad__intro{font-size:14px;color:var(--text-secondary);margin:4px 0 0;line-height:1.55}
.fad__sub{font-size:13px;color:var(--text-secondary);margin:0 0 10px}
/* P1 · chips con los datos extraídos */
.fad__chips{display:flex;flex-wrap:wrap;gap:8px}
.fad__chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-weight:600;font-size:13px;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:7px 13px}
.fad__chip-i{font-size:15px;line-height:1}
/* P2 · el esquema, numerado y a dos columnas */
.fad__esq{margin:0;padding-left:22px;columns:2;column-gap:26px}
.fad__esq li{font-size:13.5px;line-height:1.45;margin-bottom:5px;break-inside:avoid}
.fad__esq li::marker{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-deep);font-weight:700}
/* P3 · tres miniaturas 16:9 */
.fad__minis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fad__mini{position:relative;aspect-ratio:16/9;background:var(--bg-white);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-card)}
.fad__mini--warn{border-color:#E8C56A}
.fad__mini-band{height:5px;background:var(--accent);flex:0 0 auto}
.fad__mini--warn .fad__mini-num{padding-right:80px}
.fad__mini-num{font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em;padding:4px 8px 0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fad__mini-body{display:flex;flex-direction:column;gap:2px;padding:2px 8px 6px;min-height:0;overflow:hidden}
.fad__mini-t{font-family:var(--font-display);font-weight:700;font-size:11.5px;line-height:1.3}
.fad__mini-l{font-size:9.5px;line-height:1.4;color:var(--text-secondary)}
.fad__mini-flag{position:absolute;top:9px;right:6px;font-family:var(--font-mono);font-size:9px;
  font-weight:700;background:#F6EDD1;border:1px solid #E8C56A;border-radius:var(--radius-pill);
  padding:2px 7px;white-space:nowrap}
/* P4 · antes/después: el «antes» se corta DE VERDAD (altura fija + overflow) */
.fad__ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fad__ba .callout{padding:10px 12px;font-size:12.5px}
.fad__ba-in{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.fad__ba-cab{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-secondary)}
.fad__ba-caja{display:flex;flex-direction:column;gap:3px;height:92px;overflow:hidden;
  background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:8px 10px}
.fad__ba-caja.is-libre{height:auto;overflow:visible}
.fad__ba-t{font-family:var(--font-display);font-weight:700;font-size:12.5px}
.fad__ba-l{font-size:11.5px;line-height:1.45;color:var(--text-secondary)}
.fad__ba-grande{font-family:var(--font-display);font-weight:700;font-size:15.5px;line-height:1.35}
.fad__ba-nota{font-size:11px;color:var(--text-secondary)}
.fad__frase{font-family:var(--font-serif);font-style:italic;font-size:13.5px;color:var(--text-secondary);
  border-top:1px solid var(--line-hair);margin:12px 0 0;padding-top:9px}
/* Cierre · resultado + copiar el recordatorio */
.fad__files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fad__file{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;
  font-weight:700;color:var(--text-primary);background:var(--tint);border:1px solid var(--accent);
  border-radius:var(--radius-pill);padding:8px 14px}
.fad__file-i{font-size:16px;line-height:1}
.fad__copy{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  border:1px solid var(--line-soft);background:var(--bg-white);border-radius:var(--radius-pill);
  padding:7px 13px;transition:all .2s var(--ease)}
.fad__copy:hover{border-color:var(--accent);background:var(--tint)}
/* La barra de avance */
.fad__barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fad__go{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  background:var(--bg-ink);color:var(--text-on-ink);border:1px solid var(--bg-ink);
  border-radius:var(--radius-pill);padding:9px 18px;transition:all .2s var(--ease)}
.fad__go:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.fad__reset{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12.5px;
  background:transparent;border:1px solid var(--line-soft);color:var(--text-primary);
  border-radius:var(--radius-pill);padding:9px 15px;transition:all .2s var(--ease)}
.fad__reset:hover{border-color:var(--accent);background:var(--tint)}
@media (max-width:860px){
  .fad__cuerpo{grid-template-columns:1fr}
  .fad__minis{grid-template-columns:repeat(3,1fr)}
  .fad__ba{grid-template-columns:1fr}
  .fad__esq{columns:1}
}
@media (prefers-reduced-motion:reduce){
  .fad__panel,.fad__stop,.fad__go,.fad__reset,.fad__copy{transition:none}
}


/* ============================================================================
   Ampliación HTML · Bloque 06 «del archivo a la app» (accent human)
   un-archivo (.uarch) · la-carpeta (.carp) · servidor-local (.srvl)
============================================================================ */
/* --- Peldaño 1 · un-archivo: archivo → doble clic → navegador con la app --- */
.uarch{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.uarch [hidden]{display:none!important}   /* guardarraíl: el JS oculta con hidden */
.uarch__zona{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.uarch__file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:0 0 auto;align-self:center;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease),border-color .45s var(--ease)}
.uarch__file.is-salta{transform:translateX(14px) scale(1.04);border-color:var(--accent)}
.uarch__file-ico{font-size:34px;line-height:1}
.uarch__file-nom{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--accent-deep)}
.uarch__file-sub{font-size:11px;color:var(--text-secondary)}
.uarch__flecha{align-self:center;font-size:22px;color:var(--accent-deep);flex:0 0 auto}
.uarch__nav{flex:1;min-width:260px;background:var(--bg-white);border:1px dashed var(--line-soft);
  border-radius:var(--radius-md);overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.uarch__nav.is-on{border:1px solid var(--accent);box-shadow:var(--shadow-card)}
.uarch__nav-bar{display:flex;align-items:center;gap:10px;background:var(--bg-paper);
  border-bottom:1px solid var(--line-hair);padding:8px 12px}
.uarch__nav-dots{display:flex;gap:4px}
.uarch__nav-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-soft)}
.uarch__nav.is-on .uarch__nav-dots i{background:var(--accent)}
.uarch__url{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uarch__nav.is-on .uarch__url{color:var(--accent-deep);font-weight:700}
.uarch__nav-body{padding:14px 16px;min-height:150px;display:flex;flex-direction:column;justify-content:center}
.uarch__espera{font-family:var(--font-serif);font-style:italic;font-size:13.5px;color:var(--text-secondary);
  text-align:center}
.uarch__app{display:flex;flex-direction:column;gap:10px}
.uarch__app-t{font-family:var(--font-display);font-weight:800;font-size:15px}
.uarch__campos{display:flex;gap:10px;flex-wrap:wrap}
.uarch__campo{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--text-secondary);
  flex:1;min-width:110px}
.uarch__campo input{font-family:var(--font-mono);font-size:14px;padding:7px 10px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--bg-paper);
  color:var(--text-primary);width:100%}
.uarch__campo input:focus{outline:none;border-color:var(--accent)}
.uarch__total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:8px 14px}
.uarch__total span{font-size:12px;color:var(--text-secondary)}
.uarch__total strong{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--accent-deep)}
.uarch__acciones{display:flex;gap:8px;flex-wrap:wrap}
.uarch .pred__btn{font-size:13.5px}
.uarch__ghost{background:transparent}
.uarch__nota{font-size:13px;color:var(--text-secondary)}
@media (max-width:720px){ .uarch__flecha{display:none} }
@media (prefers-reduced-motion:reduce){
  .uarch__file,.uarch__nav{transition:none}
}

/* --- Peldaño 2 · la-carpeta: los enlaces se rompen si un archivo sale ---
   El rojo de «enlace roto» y el azul de «HTML desnudo» son SEMÁNTICOS
   (como el ámbar fijo del callout.warn): no dependen del accent del bloque. */
.carp{display:flex;flex-direction:column;gap:12px;margin-top:6px;
  --carp-roto:var(--sem-roto);--carp-roto-bg:var(--sem-roto-bg)}
.carp [hidden]{display:none!important}   /* guardarraíl: el JS oculta con hidden */
.carp__cuerpo{display:grid;grid-template-columns:minmax(230px,320px) 1fr;gap:14px;align-items:stretch}
.carp__lado{display:flex;flex-direction:column;gap:8px;min-width:0}
.carp__folder{background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-md);
  padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.carp__folder-t{font-family:var(--font-display);font-weight:800;font-size:14px}
.carp__files{display:flex;flex-wrap:wrap;gap:6px}
.carp__chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;
  font-weight:700;background:var(--bg-white);border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);padding:6px 11px;transition:opacity .3s var(--ease)}
.carp__chip--css{border-color:var(--accent)}
.carp__chip.is-hueco{opacity:.3;border-style:dashed;text-decoration:line-through}
.carp__links{display:flex;flex-direction:column;gap:4px;border-top:1px dashed var(--line-soft);padding-top:8px}
.carp__link{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;
  color:var(--text-secondary)}
.carp__link-ico{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.carp__link.is-roto{color:var(--carp-roto);font-weight:700;text-decoration:line-through}
.carp__link.is-roto .carp__link-ico{background:var(--carp-roto)}
.carp__fuera{background:var(--bg-paper);border:1px dashed var(--line-soft);border-radius:var(--radius-md);
  padding:10px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.carp__fuera-t{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary)}
.carp__chip.is-fuera{border-color:var(--carp-roto);color:var(--carp-roto);background:var(--carp-roto-bg)}
.carp__fuera-vacio{font-family:var(--font-serif);font-style:italic;font-size:12px;color:var(--text-secondary)}
.carp__nav{background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;min-width:0}
.carp__nav-bar{display:flex;align-items:center;gap:10px;background:var(--bg-paper);
  border-bottom:1px solid var(--line-hair);padding:8px 12px}
.carp__nav-dots{display:flex;gap:4px}
.carp__nav-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-soft)}
.carp__nav-url{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary)}
.carp__page{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.carp__page-menu{display:flex;gap:6px;flex-wrap:wrap}
.carp__page-menu span{font-family:var(--font-display);font-weight:600;font-size:11.5px;
  background:var(--tint);color:var(--accent-deep);border-radius:var(--radius-pill);padding:4px 11px}
.carp__page-t{font-family:var(--font-display);font-weight:800;font-size:17px}
.carp__page-l{height:9px;border-radius:5px;background:var(--tint)}
.carp__page-l.is-corta{width:62%}
/* La página «rota»: sin estilos.css, el navegador enseña el HTML desnudo */
.carp__page.is-rota .carp__page-menu span{background:transparent;border-radius:0;padding:0;
  color:#2222CC;text-decoration:underline;font-family:Georgia,'Times New Roman',serif;
  font-weight:400;font-size:13px}
.carp__page.is-rota .carp__page-t{font-family:Georgia,'Times New Roman',serif}
.carp__page.is-rota .carp__page-l{background:var(--line-soft);border-radius:0;height:8px}
.carp__page-aviso{margin-top:auto;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  color:var(--carp-roto);background:var(--carp-roto-bg);border:1px solid var(--carp-roto);
  border-radius:var(--radius-sm);padding:7px 10px}
.carp .pred__btn{font-size:13.5px}
.carp__nota{font-size:13px;color:var(--text-secondary)}
@media (max-width:860px){ .carp__cuerpo{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .carp__chip{transition:none} }

/* --- Peldaño 3 · servidor-local: el motor desbloquea guardar/procesar --- */
.srvl{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.srvl__cuerpo{display:grid;grid-template-columns:1fr minmax(170px,220px);gap:14px;align-items:stretch}
.srvl__nav{background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  overflow:hidden;min-width:0}
.srvl__nav-bar{display:flex;align-items:center;gap:10px;background:var(--bg-paper);
  border-bottom:1px solid var(--line-hair);padding:8px 12px}
.srvl__nav-dots{display:flex;gap:4px}
.srvl__nav-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-soft)}
.srvl__url{font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease)}
.srvl__url.is-local{color:var(--accent-deep);font-weight:700}
.srvl__app{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.srvl__app-t{font-family:var(--font-display);font-weight:800;font-size:15px}
.srvl__caps{display:flex;flex-direction:column;gap:7px}
.srvl__cap{display:flex;align-items:center;gap:10px;background:var(--bg-paper);
  border:1px dashed var(--line-soft);border-radius:var(--radius-sm);padding:8px 12px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.srvl__cap-ico{font-size:17px;filter:grayscale(1);opacity:.55;
  transition:filter .3s var(--ease),opacity .3s var(--ease)}
.srvl__cap-txt{font-family:var(--font-display);font-weight:600;font-size:13px;flex:1;
  color:var(--text-secondary)}
.srvl__cap-est{font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--text-secondary);white-space:nowrap}
.srvl__cap.is-on{background:var(--tint);border:1px solid var(--accent)}
.srvl__cap.is-on .srvl__cap-ico{filter:none;opacity:1}
.srvl__cap.is-on .srvl__cap-txt{color:var(--text-primary)}
.srvl__cap.is-on .srvl__cap-est{color:var(--accent-deep)}
.srvl__motor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;background:var(--bg-paper);border:1px dashed var(--line-soft);
  border-radius:var(--radius-md);padding:14px 12px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.srvl__motor-ico{font-size:30px;line-height:1;filter:grayscale(1);opacity:.5;
  transition:filter .3s var(--ease),opacity .3s var(--ease)}
.srvl__motor.is-on{background:var(--tint);border:1px solid var(--accent)}
.srvl__motor.is-on .srvl__motor-ico{filter:none;opacity:1}
.srvl__motor-t{font-family:var(--font-display);font-weight:800;font-size:13.5px}
.srvl__bat{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--accent-deep);
  background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  padding:5px 11px}
.srvl__motor.is-on .srvl__bat{border-color:var(--accent)}
.srvl__motor-est{font-size:11px;color:var(--text-secondary);line-height:1.4}
.srvl .pred__btn{font-size:13.5px}
.srvl__nota{font-size:13px;color:var(--text-secondary)}
@media (max-width:720px){ .srvl__cuerpo{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .srvl__cap,.srvl__cap-ico,.srvl__motor,.srvl__motor-ico,.srvl__url{transition:none}
}

/* --- Bloque 05 · predice-cita: ¿lo tiene el documento o se lo inventa? ---
   La cita «subrayada» (.cita__marca) lleva el mismo tratamiento que .anx__dato
   pero con el tint del bloque — la metáfora es el subrayador sobre el papel.
   El rojo del veredicto ✗ es SEMÁNTICO (como el ámbar del callout.warn). */
.cita__marca{background:var(--tint);border-radius:4px;padding:0 3px;color:var(--text-primary)}
.pcit{display:flex;flex-direction:column;gap:12px;margin-top:6px;--pcit-ko:var(--sem-roto)}
.pcit [hidden]{display:none!important}   /* guardarraíl: el JS oculta con hidden */
.pcit .pred__btn{font-size:13.5px}
.pcit__tarjeta{background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.pcit__doc{font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--accent-deep);
  letter-spacing:.04em}
.pcit__pregunta{margin:0;font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.35}
.pcit__prediccion .pred__btn:disabled{cursor:default;opacity:.55}
.pcit__prediccion .pred__btn.is-on:disabled{opacity:1}
.pcit__reveal{display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pcit__reveal.is-in{opacity:1;transform:none}
.pcit__veredicto{font-family:var(--font-display);font-weight:800;font-size:14.5px}
.pcit__veredicto.is-ok{color:var(--accent-deep)}
.pcit__veredicto.is-ko{color:var(--pcit-ko)}
.pcit__resp{background:var(--bg-white);border:1px solid var(--accent);border-radius:var(--radius-md);
  padding:14px 18px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.pcit__resp-txt{font-family:var(--font-display);font-weight:800;font-size:16.5px}
.pcit__cita{font-family:var(--font-serif);font-style:italic;font-size:15.5px;line-height:1.6}
.pcit__apartado{font-family:var(--font-mono);font-style:normal;font-weight:700;font-size:12px;
  color:var(--accent-deep);background:var(--tint);border:1px solid var(--accent);
  border-radius:var(--radius-pill);padding:2px 9px;margin-right:8px;white-space:nowrap}
.pcit__pie{font-size:13px;color:var(--text-secondary)}
.pcit__contraste{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.pcit__cl{font-size:14px}
.pcit__cl-cuerpo{display:flex;flex-direction:column;gap:6px;min-width:0}
.pcit__cl-cuerpo b{font-family:var(--font-display);font-size:13.5px}
.pcit__cl-txt{margin:0;font-family:var(--font-serif);font-style:italic;line-height:1.55}
.pcit__acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  border-top:1px dashed var(--line-soft);padding-top:12px}
@media (max-width:820px){ .pcit__contraste{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .pcit__reveal{transition:none} }

/* --- Bloque ★ (Newton) · pregunta-a-newton: el chat guionizado ---
   Un chat de verdad que crece turno a turno (burbujas acumuladas con scroll
   interno), no una tarjeta que se sustituye. El badge de transparencia
   (.pan__badge) es FIJO: sin botón de cierre ni descarte — que sea demo
   guionizada y no IA real es parte de la lección, no un defecto a esconder.
   Hereda el accent del bloque (human) vía --accent/--tint: cero color fijo. */
.pan{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.pan .pred__btn{font-size:13.5px}
.pan__cabecera{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:10px 16px}
.pan__avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--tint);
  border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:21px}
.pan__quien{display:flex;flex-direction:column;gap:1px;min-width:0}
.pan__nombre{font-family:var(--font-display);font-weight:800;font-size:15.5px;line-height:1.2}
.pan__rol{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.06em}
.pan__badge{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--text-secondary);background:var(--tint);border:1px solid var(--accent);
  border-radius:var(--radius-pill);padding:4px 12px}
.pan__chat{display:flex;flex-direction:column;gap:10px;background:var(--bg-white);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:14px 16px;
  max-height:290px;min-height:96px;overflow-y:auto}
.pan__msg{max-width:84%;border-radius:var(--radius-md);padding:10px 14px;font-size:14.5px;
  line-height:1.5;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pan__msg.is-nueva{opacity:0;transform:translateY(6px)}
.pan__msg--newton{align-self:flex-start;background:var(--tint);border:1px solid var(--accent);
  border-bottom-left-radius:4px}
.pan__msg--user{align-self:flex-end;background:var(--bg-paper);border:1px solid var(--line-soft);
  border-bottom-right-radius:4px}
.pan__remite{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--text-secondary);letter-spacing:.05em;margin-bottom:3px}
.pan__form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  border-top:1px dashed var(--line-soft);padding-top:12px}
.pan__input{flex:1;min-width:210px;font:inherit;font-size:14px;padding:9px 14px;
  background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  color:var(--text-primary)}
.pan__input:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--tint)}
.pan__pie{display:flex;gap:8px;flex-wrap:wrap}
.pan__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){ .pan__badge{margin-left:0} }
@media (prefers-reduced-motion:reduce){ .pan__msg{transition:none} }

/* --- Bloque ★ (Newton) · orbita-newton: el cañón, la órbita y el escape ---
   La escena vive sobre --bg-ink (el espacio) con el planeta en --tint/--accent:
   cero color fijo — hereda el accent human del bloque. La banda «zona de
   órbita» y la marca de escape van sobre el riel del deslizador con el patrón
   de marcador de .lib__ventana (posición absoluta sobre el track). El
   proyectil NO lleva transición CSS: lo mueve JS con rAF, y kdReduced() lo
   deja quieto en su posición final (por eso aquí no hace falta media query
   de reduced-motion para él; solo se apaga la del panel de estado). */
.orb{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.orb__escena{position:relative;background:var(--bg-ink);border:1px solid var(--line-soft);border-radius:var(--radius-md);overflow:hidden}
.orb__svg{display:block;width:100%;height:auto;max-height:400px;margin:0 auto}
.orb__estrella{fill:var(--text-on-ink-dim);opacity:.55}
.orb__planeta{fill:var(--tint);stroke:var(--accent);stroke-width:2}
.orb__tierra{fill:var(--accent);opacity:.4}
.orb__canon-monte{fill:var(--accent-deep)}
.orb__canon-tubo{fill:var(--text-on-ink)}
.orb__tray{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 7;opacity:.9}
.orb__manzana{font-size:17px}
.orb__pie{position:absolute;right:10px;bottom:8px;color:var(--text-on-ink-dim);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;pointer-events:none}
.orb__mando{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.orb__ctrl{flex:1;min-width:280px;display:flex;flex-direction:column;gap:4px}
.orb__lbl{font-size:13.5px}
.orb__lbl b{font-family:var(--font-mono);font-size:13px;color:var(--accent-deep)}
.orb__track{position:relative;display:block;padding:20px 0 2px}
.orb__slider{width:100%;display:block;margin:0;position:relative;z-index:1;accent-color:var(--accent-deep)}
.orb__zona-orbita{position:absolute;top:16px;bottom:0;background:var(--tint);
  border:1px dashed var(--accent-deep);border-radius:6px;pointer-events:none}
.orb__marca-escape{position:absolute;top:16px;bottom:0;width:3px;background:var(--bg-ink);
  border-radius:2px;opacity:.65;pointer-events:none}
.orb__zona-orbita i,.orb__marca-escape i{position:absolute;left:50%;transform:translateX(-50%);
  bottom:100%;margin-bottom:2px;font-style:normal;font-family:var(--font-mono);font-size:10px;
  white-space:nowrap;color:var(--accent-deep)}
.orb__marca-escape i{color:var(--text-secondary)}
.orb__escala{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:10.5px;color:var(--text-secondary)}
.orb__acciones{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:16px}
.orb__estado{display:flex;align-items:flex-start;gap:12px;background:var(--bg-white);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:12px 16px;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.orb__estado[data-estado="orbita"],.orb__estado[data-estado="elipse"]{background:var(--tint);border-color:var(--accent)}
.orb__estado-ico{font-size:26px;line-height:1.2}
.orb__estado-caja{display:flex;flex-direction:column;gap:2px;min-width:0}
.orb__estado-txt{font-family:var(--font-display);font-weight:800;font-size:clamp(16px,2vw,20px);line-height:1.25}
.orb__pista{font-size:13.5px;color:var(--text-secondary);line-height:1.5}
@media (max-width:760px){ .orb__mando{align-items:stretch} .orb__acciones{padding-bottom:0} }
@media (prefers-reduced-motion:reduce){ .orb__estado{transition:none} }

/* ============================================================================
   Emisión de pantalla del formador (Fase 20) · botón, punto REC y overlay
============================================================================ */
.dot--rec{background:var(--accent-human-deep)!important;animation:kRec 1.2s ease-in-out infinite}
@keyframes kRec{0%,100%{opacity:1}50%{opacity:.35}}
.topbar__btn.is-emitiendo{border-color:var(--accent-human-deep);color:var(--accent-human-deep);background:var(--tint-human)}
.topbar__btn.is-cast{border-color:var(--accent-human-deep);color:var(--accent-human-deep)}
.fps-sel{font-family:var(--font-mono);font-size:12px;border:1px solid var(--line-soft);
  border-radius:var(--radius-pill);background:var(--bg-paper);color:var(--text-primary);
  padding:6px 8px;cursor:pointer;height:34px}
.fps-sel:hover{border-color:var(--accent)}

.screencast{position:fixed;inset:0;z-index:60;background:rgba(23,23,20,.92);
  display:flex;flex-direction:column;animation:kEntra .25s var(--ease) both}
.screencast__bar{display:flex;align-items:center;gap:10px;padding:12px 18px;
  color:var(--text-on-ink);font-family:var(--font-display);font-weight:600;font-size:14px;
  border-bottom:1px solid rgba(247,245,239,.14)}
.screencast__t{flex:1}
.screencast__x{font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;
  background:transparent;border:1px solid rgba(247,245,239,.35);color:var(--text-on-ink);
  border-radius:var(--radius-pill);padding:7px 14px;transition:border-color .2s var(--ease)}
.screencast__x:hover{border-color:var(--text-on-ink)}
.screencast__wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:0}
.screencast__img{display:none;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--radius-sm);box-shadow:0 8px 40px rgba(0,0,0,.4)}
.screencast__wait{color:var(--text-on-ink-dim);font-family:var(--font-mono);font-size:13px}
@media (prefers-reduced-motion:reduce){.dot--rec{animation:none}.screencast{animation:none}}

/* ============================================================================
   DEMO zoom-svg-foto (bloque 05) · SVG (vectores) vs foto (rejilla de píxeles)
============================================================================ */
.zsf{display:flex;flex-direction:column;gap:14px}
.zsf__ctxnote{font-size:14px;color:var(--text-secondary);min-height:20px}
.zsf__paneles{align-items:stretch}
.zsf__panel{background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.zsf__rotulo{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary)}
.zsf__lienzo{width:160px;height:160px;max-width:100%;overflow:hidden;
  border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--bg-white);
  display:flex;align-items:center;justify-content:center}
/* La lupa: el marco es fijo; lo que escala es el contenido, anclado SOBRE el
   borde superior-izquierdo del disco (~13%) para que al ampliar se vea la curva
   nítida del SVG contra el escalón de píxeles de la rejilla (no el interior liso). */
.zsf__zoomable{width:150px;height:150px;transform-origin:13% 13%;
  transition:transform .28s var(--ease);will-change:transform}
.zsf__rejilla{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr)}
.zsf__px{display:block;width:100%;height:100%}
.zsf__px.is-on{background:var(--accent)}
.zsf__zoom{justify-content:center}
.zsf__pie{min-height:40px;font-size:14px;color:var(--text-primary);text-align:center;
  background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-md);
  padding:10px 14px;display:flex;align-items:center;justify-content:center}
.zsf__acciones{display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.zsf__zoomable{transition:none}}

/* ============================================================================
   DEMO solo-tu-o-todos (bloque 08) · dos ventanas + mural local/compartido
============================================================================ */
.stt{display:flex;flex-direction:column;gap:14px}
.stt__modo{justify-content:flex-start}
.stt__ventanas{align-items:stretch}
.stt__ventana{display:flex;flex-direction:column;gap:10px}
.stt__ventana h4{display:flex;align-items:center;gap:6px}
.stt__ventana--espejo{background:var(--bg-white)}
.stt__solo-lectura{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-secondary);margin-top:-4px}
.stt__form{display:flex;gap:8px;flex-wrap:wrap}
.stt__input{flex:1 1 140px;min-width:0;font-family:var(--font-body);font-size:14px;
  border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:9px 12px;
  background:var(--bg-white);color:var(--text-primary)}
.stt__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.stt__fijar{flex:0 0 auto}
.stt__mural{display:flex;flex-direction:column;gap:8px;min-height:44px}
.stt__vacio{font-size:13px;color:var(--text-secondary);font-style:italic;margin:0}
.stt__callout{margin:0}
.stt__acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.mural__nota{background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:8px 11px;font-size:13.5px;line-height:1.4;color:var(--text-primary);
  box-shadow:0 1px 2px rgba(23,23,20,.06);word-break:break-word}
.mural__nota.es-nueva{animation:kMuralNueva .5s var(--ease) both}
.mural__nota-marca{font-family:var(--font-mono);font-size:10.5px;color:var(--accent-deep);
  margin-left:6px;white-space:nowrap}
@keyframes kMuralNueva{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mural__nota.es-nueva{animation:none}}

/* ============================================================================
   DEMO elige-tu-problema (bloque 11) · selector de problema → hoja de ruta
============================================================================ */
.etp{display:flex;flex-direction:column;gap:14px}
.etp__selector{flex-wrap:wrap}
.etp__panel{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:16px 18px;display:flex;flex-direction:column;gap:11px;
  opacity:0;transform:translateY(4px);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.etp__panel[hidden]{display:none}   /* el display:flex le ganaba al atributo hidden */
.etp__panel.is-in{opacity:1;transform:none}
.etp__fila{display:flex;flex-direction:column;gap:2px}
.etp__k{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--accent-deep)}
.etp__v{font-size:14.5px;line-height:1.45;color:var(--text-primary)}
.etp__acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
@media (prefers-reduced-motion:reduce){.etp__panel{transition:none}}

/* ============================================================================
   DEMO ciclo-cowork (bloque 10c) · las 4 piezas del ciclo + hub Excel maestro
============================================================================ */
.cic{display:flex;flex-direction:column;gap:14px}
.cic__cab{display:flex;flex-direction:column;gap:2px}
.cic__titulo{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-primary)}
.cic__instr{font-size:13.5px;color:var(--text-secondary)}
.cic__fila{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:6px}
.cic__pieza{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:104px;padding:12px 10px;border:1px solid var(--accent);border-radius:var(--radius-md);
  background:var(--tint);color:var(--text-primary);font-family:var(--font-body);transition:opacity .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.cic__pieza.is-off{background:var(--bg-paper);border-color:var(--line-soft);opacity:.5}
.cic__pico{font-size:22px;line-height:1}
.cic__pnom{font-family:var(--font-display);font-weight:600;font-size:13px;text-align:center}
.cic__flecha{display:flex;align-items:center;font-size:18px;color:var(--accent-deep);font-weight:700}
.cic__flecha.is-rota{opacity:.35;color:var(--text-secondary)}
.cic__flecha--loop{color:var(--accent-deep)}
.cic__hub{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  border:1px dashed var(--accent-deep);border-radius:var(--radius-md);background:var(--bg-white);
  padding:12px 16px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text-primary)}
.cic__estado{min-height:44px;font-size:14.5px;line-height:1.5;color:var(--text-primary);
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:12px 16px}
.cic__estado.is-completo{background:var(--tint);border-color:var(--accent)}
.cic__pie{display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.cic__pieza{transition:none}}

/* ============================================================================
   DEMO carpeta-cowork (bloque 10c) · antes/después + zona _revisar/
============================================================================ */
.cwk{display:flex;flex-direction:column;gap:14px}
.cwk__modo{justify-content:flex-start}
.cwk__vista{display:flex;flex-direction:column;gap:12px}
.cwk__plana{display:flex;flex-wrap:wrap;gap:8px}
.cwk__chip{display:inline-flex;flex-direction:column;gap:1px;background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:7px 11px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary);word-break:break-word}
.cwk__grupo{background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:12px 14px}
.cwk__grupo-t{font-family:var(--font-display);font-weight:700;font-size:13.5px;margin-bottom:8px;color:var(--text-primary)}
.cwk__grupo .cwk__chip,.cwk__revisar .cwk__chip{display:flex;margin-bottom:6px;background:var(--tint)}
.cwk__grupo .cwk__chip:last-child,.cwk__revisar .cwk__chip:last-child{margin-bottom:0}
.cwk__nuevo{font-weight:600}
.cwk__antes{font-family:var(--font-body);font-size:11px;color:var(--text-secondary);margin-top:2px}
.cwk__revisar{border:1px solid var(--sem-warn);background:var(--sem-warn-bg);border-radius:var(--radius-md);padding:12px 14px}
.cwk__revisar .cwk__grupo-t{color:var(--text-primary)}
.cwk__chip--revisar{cursor:pointer;text-align:left;border-color:var(--sem-warn);background:var(--bg-white)}
.cwk__chip--revisar.is-activo{border-color:var(--sem-warn);box-shadow:0 0 0 2px var(--sem-warn-bg)}
.cwk__motivo{font-size:14px;line-height:1.5;color:var(--text-secondary);
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:11px 14px}
.cwk__motivo.is-motivo{color:var(--text-primary);border-color:var(--sem-warn);background:var(--sem-warn-bg)}
.cwk__nota{font-size:13.5px;color:var(--text-secondary);font-style:italic}

/* ============================================================================
   DEMO pregunta-o-inventa (bloque 10c) · inventa vs pregunta, lado a lado
============================================================================ */
.poi{display:flex;flex-direction:column;gap:14px}
.poi__sel{justify-content:flex-start}
.poi__col h4{font-family:var(--font-display);font-weight:700;font-size:14.5px;margin:0 0 8px}
.poi__col p{font-size:14px;line-height:1.5;margin:0;color:var(--text-primary)}
.poi__col--inventa{border-color:var(--sem-warn);background:var(--sem-warn-bg)}
.poi__col--pregunta{border-color:var(--accent-sage);background:var(--tint-sage)}
.poi__nota{font-size:13.5px;line-height:1.5;color:var(--text-primary);
  background:var(--tint);border:1px solid var(--accent);border-radius:var(--radius-md);padding:11px 14px}

/* ============================================================================
   DEMO banco-practicas (área Prácticas) · filtros + grid de tarjetas
============================================================================ */
.bpr{display:flex;flex-direction:column;gap:14px}
.bpr__filtros{display:flex;flex-direction:column;gap:8px}
.bpr__flabel{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary)}
.bpr__caps,.bpr__difs{justify-content:flex-start}
.bpr__cap,.bpr__dif{font-size:13px}
.bpr__count{font-family:var(--font-mono);font-size:12.5px;color:var(--text-secondary)}
.bpr__grid{margin-top:0}
.bpr__card{cursor:pointer;text-align:left;align-items:stretch;border:1px solid var(--line-soft);
  font-family:inherit;color:inherit;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.bpr__card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 14px rgba(23,23,20,.08)}
.bpr__card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bpr__chead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bpr__cico{font-size:22px;line-height:1}
.bpr__cdif{font-family:var(--font-mono);font-size:10.5px;border-radius:var(--radius-pill);
  padding:3px 9px;white-space:nowrap;border:1px solid var(--line-soft)}
.bpr__cdif--facil{background:var(--tint-sage);border-color:var(--accent-sage);color:var(--accent-sage-deep)}
.bpr__cdif--media{background:var(--sem-warn-bg);border-color:var(--sem-warn);color:var(--text-primary)}
.bpr__cdif--avanzada{background:var(--sem-roto-bg);border-color:var(--sem-roto);color:var(--sem-roto)}
.bpr__ctit{font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.3;color:var(--text-primary)}
.bpr__cque{font-size:12.5px;color:var(--text-secondary);line-height:1.4;margin:0;flex:1}
.bpr__cir{font-family:var(--font-mono);font-size:12px;color:var(--accent-deep);align-self:flex-end}
.bpr__vacio{font-size:13.5px;color:var(--text-secondary);font-style:italic;grid-column:1/-1;margin:0}
@media (prefers-reduced-motion:reduce){.bpr__card{transition:none}.bpr__card:hover{transform:none}}

/* ============================================================================
   DEMO dos-tiradas (bloque 00) · misma pregunta, dos respuestas
============================================================================ */
.dtr{display:flex;flex-direction:column;gap:14px}
.dtr__preg{background:var(--bg-white);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  padding:12px 16px;font-size:15px;color:var(--text-primary);display:flex;flex-direction:column;gap:4px}
.dtr__preg-tag{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary)}
.dtr__tiradas{align-items:stretch}
.dtr__col{display:flex;flex-direction:column;gap:8px}
.dtr__lbl{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-deep)}
.dtr__col p{font-size:15.5px;line-height:1.4;margin:0;color:var(--text-primary);font-style:italic}
.dtr__acciones{display:flex;justify-content:center}
.dtr__nota{font-size:13.5px;line-height:1.5;color:var(--text-primary);background:var(--tint);
  border:1px solid var(--accent);border-radius:var(--radius-md);padding:11px 14px}

/* ============================================================================
   DEMO de-dato-a-visual (bloque 07) · tabla cruda vs barras
============================================================================ */
.dtv{display:flex;flex-direction:column;gap:14px}
.dtv__modo{justify-content:flex-start}
.dtv__datos{overflow-x:auto}   /* scroll de rescate en móvil estrecho (patrón .csvd__raw/.te__pre) */
.dtv__tabla{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12.5px}
.dtv__tabla th,.dtv__tabla td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line-soft)}
.dtv__tabla th{color:var(--text-secondary);font-weight:600}
.dtv__resto{margin-top:8px;font-size:12.5px;color:var(--text-secondary);font-style:italic}
.dtv__titulo{font-family:var(--font-display);font-weight:700;font-size:14px;margin-bottom:10px;color:var(--text-primary)}
.dtv__barra{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;margin-bottom:10px}
.dtv__bcat{font-size:13.5px;color:var(--text-primary)}
.dtv__bpista{background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius-pill);height:20px;overflow:hidden}
.dtv__bfill{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .4s var(--ease)}
.dtv__bval{font-family:var(--font-mono);font-size:12.5px;color:var(--accent-deep);white-space:nowrap}
.dtv__nota{font-size:13.5px;line-height:1.5;color:var(--text-primary);background:var(--tint);
  border:1px solid var(--accent);border-radius:var(--radius-md);padding:11px 14px}
@media (max-width:760px){.dtv__barra{grid-template-columns:88px 1fr auto}}
@media (prefers-reduced-motion:reduce){.dtv__bfill{transition:none}}