/* Estilos de las demos de la sesión 02.
 *
 * Todo con prefijo s2- porque estas clases conviven en la misma hoja con las de
 * la sesión 01 (.d-*) y con las del mazo (.mz-*). Ya nos costó un rato el día
 * que `.pt` significaba dos cosas distintas en el mismo archivo.
 *
 * Los tamaños van en clamp() contra el viewport: esto se proyecta, y lo que en
 * una laptop se lee cómodo en una sala de 200 personas no se lee. */

/* ── interruptores y botones ── */
.s2-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: clamp(14px, 1.15vw, 19px); color: var(--tinta-2); user-select: none; }
.s2-sw input { width: 20px; height: 20px; accent-color: var(--marca); cursor: pointer; flex: none; }
.s2-sw.grande { font-size: clamp(15px, 1.3vw, 21px); font-weight: 700;
  background: var(--papel-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 16px; }
.s2-sw.grande:has(input:checked) { border-color: var(--marca); background: var(--marca-bg); }

.s2-b { font: 700 clamp(15px, 1.25vw, 20px)/1 var(--sans); padding: 13px 22px; border-radius: 13px;
  border: 1px solid var(--borde-2); background: var(--papel); color: var(--tinta-2);
  cursor: pointer; transition: border-color var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.s2-b.pri { background: var(--marca); border-color: var(--marca); color: #fff; }
.s2-b.pri:hover { background: var(--marca-2); }
.s2-mandos { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap;
  margin-bottom: clamp(14px, 2vh, 22px); }

/* ══════════════════════════════════════════════ la cadena corriendo */
.s2-flujo { display: grid; gap: 10px; }
.s2-nodo { border: 1px solid var(--borde); border-left: 4px solid var(--borde-2);
  border-radius: 14px; background: var(--papel-2); padding: 11px 16px;
  transition: border-color var(--t2) var(--e-std), background var(--t2) var(--e-std); }
.s2-nodo.activo { border-left-color: var(--marca); background: var(--marca-bg); }
.s2-nodo.listo { border-left-color: var(--verde-solido); }
.s2-nodo.sospechoso { border-left-color: var(--ambar); background: var(--ambar-bg); }

.s2-nt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.s2-nt i { font: 800 clamp(12px, .95vw, 15px)/1 var(--mono); font-style: normal;
  color: var(--tinta-4); }
.s2-nt b { font-size: clamp(17px, 1.45vw, 24px); }
.s2-nt em { font-style: normal; font-size: clamp(13px, 1.05vw, 17px); color: var(--tinta-3); }
.s2-est { margin-left: auto; font: 700 clamp(12px, .95vw, 15px)/1 var(--mono);
  color: var(--tinta-4); }
.s2-nodo.activo .s2-est { color: var(--marca); }
.s2-nodo.listo .s2-est { color: var(--verde-solido); }
.s2-nodo.sospechoso .s2-est { color: var(--ambar); }

.s2-dato:empty { display: none; }
.s2-campos { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 9px; }
.s2-campos span { font: 600 clamp(13px, 1.1vw, 18px)/1.4 var(--mono); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--borde); border-radius: 9px; padding: 5px 10px; }
.s2-campos i { font-style: normal; color: var(--tinta-4); margin-right: 7px; }
.s2-campos u { text-decoration: none; color: var(--rojo); font-style: italic; }
.s2-aviso { margin: 8px 0 0; font-size: clamp(13px, 1.1vw, 18px); font-weight: 700;
  color: var(--ambar); }

.s2-pie { margin: clamp(12px, 2vh, 20px) 0 0; font-size: clamp(15px, 1.25vw, 21px);
  color: var(--tinta-2); line-height: 1.45; }
.s2-pie:empty { display: none; }
.s2-pie .mal { color: var(--rojo); }
.s2-pie .bien { color: var(--verde-solido); }

/* ══════════════════════════════════════════════════════ el agente */
.s2-pedidos { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(12px, 2vh, 20px); }
.s2-chip { font: 600 clamp(13px, 1.1vw, 18px)/1 var(--sans); padding: 10px 15px; border-radius: 999px;
  border: 1px solid var(--borde-2); background: var(--papel); color: var(--tinta-2); cursor: pointer;
  transition: border-color var(--t1) var(--e-std), color var(--t1) var(--e-std); }
.s2-chip:hover { border-color: var(--marca); color: var(--marca); }
.s2-chip.on { border-color: var(--marca); background: var(--marca); color: #fff; }

.s2-ag-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px); align-items: start; }

.s2-bucle { min-height: min(40vh, 380px); max-height: min(46vh, 440px); overflow: auto;
  scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; }
.s2-vacio { margin: 0; color: var(--tinta-4); font-size: clamp(15px, 1.25vw, 21px); }
.s2-vuelta { display: flex; flex-direction: column; gap: 7px;
  border-left: 3px solid var(--borde-2); padding-left: clamp(12px, 1.4vw, 20px); }

.s2-lin { display: flex; gap: 12px; align-items: baseline;
  animation: s2-entra var(--t3) var(--e-out) both; }
/* 14ch porque la etiqueta mas larga es PENSAMIENTO: once caracteres mas el
   espaciado de .1em no caben en 10.5ch y el texto se le montaba encima */
.s2-lin i { font: 800 clamp(10px, .82vw, 13px)/1.7 var(--mono); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-4);
  flex: none; width: 14ch; }
.s2-lin span { font-size: clamp(15px, 1.25vw, 21px); line-height: 1.42; color: var(--tinta-2); }
.s2-lin code { font: 800 clamp(14px, 1.15vw, 19px)/1 var(--mono); color: var(--marca); }

.s2-lin.acc i { color: var(--marca); }
.s2-lin.obs i { color: var(--verde-solido); }
.s2-lin.obs span { font-family: var(--mono); font-size: clamp(14px, 1.1vw, 18px); }
.s2-lin.obs.mal i, .s2-lin.obs.mal span { color: var(--rojo); }
.s2-lin.fin i { color: var(--tinta); }
.s2-lin.fin span { font-weight: 700; color: var(--tinta); }
.s2-lin.fin.freno i, .s2-lin.fin.freno span { color: var(--ambar); }
@keyframes s2-entra { from { opacity: 0; transform: translateY(8px); } }

.s2-lado { border-left: 1px solid var(--borde); padding-left: clamp(16px, 2vw, 28px); }
.s2-lt { font: 800 clamp(10px, .82vw, 13px)/1.7 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-4); margin: 0 0 8px; }
.s2-lt:not(:first-child) { margin-top: clamp(14px, 2vh, 22px); }

.s2-herr { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.s2-herr span.ok { font: 700 clamp(13px, 1.05vw, 17px)/1 var(--mono); color: var(--verde-solido);
  background: var(--verde-bg); border: 1px solid var(--verde-bd); border-radius: 9px;
  padding: 7px 11px; }

.s2-tabla { width: 100%; border-collapse: collapse; font-size: clamp(12px, 1vw, 16px); }
.s2-tabla th { font: 800 clamp(10px, .8vw, 13px)/1.6 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-4); text-align: left;
  border-bottom: 1px solid var(--borde); padding: 4px 6px; }
.s2-tabla td { padding: 7px 6px; border-bottom: 1px solid var(--borde); color: var(--tinta-2);
  font-family: var(--mono); }
.s2-tabla tr.nuevo td { background: var(--verde-bg); color: var(--verde-2); font-weight: 700; }

.s2-no { margin: 0; padding-left: 1.15em; }
.s2-no li { font-size: clamp(13px, 1.05vw, 17px); color: var(--tinta-3); margin-bottom: 4px; }

/* ═════════════════════════════════════════════════════════ permisos */
.s2-sws { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(16px, 2.6vh, 26px); }
.s2-acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.s2-acc li { display: flex; align-items: baseline; gap: 14px; border-radius: 13px;
  padding: 11px 16px; border: 1px solid var(--borde); background: var(--papel-2);
  transition: border-color var(--t2) var(--e-std), background var(--t2) var(--e-std); }
.s2-acc li.si { border-color: var(--verde-bd); background: var(--verde-bg); }
.s2-acc li.no { border-color: var(--borde-2); }
.s2-acc i { font-style: normal; font-size: clamp(17px, 1.4vw, 23px); font-weight: 800; flex: none; }
.s2-acc li.si i { color: var(--verde-solido); }
.s2-acc li.no i { color: var(--tinta-4); }
.s2-acc b { font-size: clamp(15px, 1.3vw, 21px); font-weight: 700; }
.s2-acc li.no b { color: var(--tinta-3); font-weight: 500; }
.s2-acc em { margin-left: auto; font: 700 clamp(12px, .98vw, 16px)/1 var(--mono);
  font-style: normal; color: var(--tinta-4); text-align: right; }
.s2-acc li.si em { color: var(--verde-solido); }

.s2-alarma { margin: clamp(14px, 2.2vh, 22px) 0 0; font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 700; line-height: 1.42; color: var(--rojo);
  background: var(--rojo-bg); border: 1px solid var(--rojo-bd); border-left: 4px solid var(--rojo);
  border-radius: 13px; padding: 13px 18px; }

/* ── la pila en pantallas angostas ── */
@media (max-width: 980px) {
  .s2-ag-cols { grid-template-columns: minmax(0, 1fr); }
  .s2-lado { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde);
    padding-top: clamp(14px, 2vh, 22px); }
  .s2-lin { flex-direction: column; gap: 2px; }
  .s2-lin i { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .s2-lin { animation: none; }
}

/* ══════════════════════════════════════ demos de la sesión 02 · criterio
 *
 * Prefijo cr- porque esta hoja ya la comparten el mazo (mz-), las demos de
 * fundamentos (d-) y las de la sesión 02 (s2-). Sin prefijo, una clase corta
 * choca sin avisar: ya pasó con `.pt`, con `.dentro` y con `.vacio`.
 *
 * Todo en clamp() contra el viewport porque esto se proyecta: lo que en una
 * laptop se lee cómodo, en una sala de doscientas personas no se lee. */

.cr-b { font: 700 clamp(15px, 1.25vw, 20px)/1 var(--sans); padding: 13px 22px; border-radius: 13px;
  border: 1px solid var(--borde-2); background: var(--papel); color: var(--tinta-2);
  cursor: pointer; transition: border-color var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.cr-b:hover { border-color: var(--marca); color: var(--marca); }
.cr-b.pri { background: var(--marca); border-color: var(--marca); color: #fff; }
.cr-b.pri:hover { background: var(--marca-2); color: #fff; }
.cr-mandos { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); flex-wrap: wrap;
  margin: clamp(12px, 2vh, 20px) 0; }
.cr-nota { font: 700 clamp(12px, .98vw, 16px)/1.4 var(--mono); color: var(--tinta-4); }
.cr-vacio { margin: 0; color: var(--tinta-4); font-size: clamp(15px, 1.25vw, 21px); }
.cr-cierre { margin: clamp(12px, 2vh, 20px) 0 0; font-size: clamp(15px, 1.3vw, 22px);
  line-height: 1.45; color: var(--tinta-2); }
.cr-intro { margin: 0 0 clamp(12px, 2vh, 18px); font-size: clamp(15px, 1.3vw, 22px);
  color: var(--tinta-2); }

/* ── 1 · el sondeo ── */
/* Dos columnas: apilado, con las tres preguntas arriba y las ocho barras
   debajo, se pasaba 117px de un 1080. Un proyector es ancho, no alto. */
.cr-sondeo { display: grid; gap: clamp(16px, 2.2vw, 34px); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.cr-sondeo .cr-mandos { margin-bottom: 0; }
.cr-manos { background: var(--marca-bg); border: 1px solid var(--marca-bd); border-radius: 16px;
  padding: clamp(14px, 2vh, 22px) clamp(16px, 2vw, 26px); }
.cr-manos p { margin: 0 0 6px; font-size: clamp(16px, 1.35vw, 23px); }
.cr-preg { margin: 0; padding-left: 1.4em; }
.cr-preg li { font-size: clamp(15px, 1.3vw, 22px); line-height: 1.55; color: var(--tinta-2); }

.cr-barras { display: grid; gap: 6px; }
.cr-fila { display: grid; grid-template-columns: minmax(0, 20rem) 1fr auto; gap: clamp(10px, 1.4vw, 20px);
  align-items: center; opacity: .3; transition: opacity var(--t3) var(--e-std); }
.cr-fila.on { opacity: 1; }
.cr-fila > span { font-size: clamp(14px, 1.2vw, 20px); font-weight: 700; }
.cr-fila em { display: block; font-style: normal; font-size: clamp(12px, 1vw, 16px);
  font-weight: 500; color: var(--tinta-3); }
.cr-barra { height: 16px; border-radius: 999px; background: var(--hundido); overflow: hidden; }
.cr-barra i { display: block; height: 100%; border-radius: 999px; background: var(--marca);
  width: 0; transition: width var(--t4) var(--e-enf); }
.cr-fila.bajo .cr-barra i { background: var(--ambar); }
.cr-fila > b { font: 800 clamp(16px, 1.4vw, 24px)/1 var(--mono); min-width: 3ch; text-align: right; }
.cr-fila.bajo > b { color: var(--ambar); }

/* ── 3 · disecar el proceso ── */
/* Dos columnas por lo mismo que el sondeo: apilado se pasaba 100px en 768. */
.cr-proc { display: grid; gap: clamp(16px, 2.2vw, 34px); align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.cr-proc .cr-mandos { margin-bottom: 0; }
.cr-pasos { display: grid; gap: 7px; margin-bottom: clamp(12px, 2vh, 18px); }
.cr-paso { position: relative; display: grid; grid-template-columns: auto minmax(0, 17rem) 1fr auto;
  gap: clamp(10px, 1.4vw, 18px); align-items: center; text-align: left; width: 100%;
  background: var(--papel-2); border: 1px solid var(--borde); border-left: 4px solid var(--borde-2);
  border-radius: 13px; padding: 10px 15px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.cr-paso:hover { border-left-color: var(--marca); }
.cr-paso.on { border-color: var(--marca); border-left-color: var(--marca); background: var(--marca-bg); }
.cr-paso.cuello { border-left-color: var(--rojo); background: var(--rojo-bg); }
.cr-paso > i { font: 800 clamp(12px, 1vw, 16px)/1 var(--mono); font-style: normal;
  color: var(--tinta-4); }
.cr-paso > b { font-size: clamp(15px, 1.25vw, 21px); }
.cr-t { display: block; height: 11px; border-radius: 999px; background: var(--marca); opacity: .32;
  transition: width var(--t4) var(--e-enf); }
.cr-paso.cuello .cr-t { background: var(--rojo); opacity: .75; }
.cr-paso > em { font: 800 clamp(13px, 1.1vw, 18px)/1 var(--mono); font-style: normal;
  color: var(--tinta-3); min-width: 6ch; text-align: right; }
.cr-paso.cuello > em { color: var(--rojo); }

.cr-det { background: var(--papel); border: 1px solid var(--borde); border-radius: 15px;
  padding: clamp(12px, 1.8vh, 20px) clamp(14px, 1.8vw, 22px); }
.cr-det > div { display: inline-block; margin: 0 clamp(16px, 2vw, 30px) 8px 0;
  font-size: clamp(14px, 1.2vw, 20px); }
.cr-det i { display: block; font: 800 clamp(10px, .82vw, 13px)/1.7 var(--mono); font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-4); }
.cr-det p { margin: 8px 0 0; font-size: clamp(14px, 1.2vw, 20px); color: var(--tinta-2);
  line-height: 1.45; }

/* ── 5 · decidir ── */
.cr-dec { text-align: center; }
.cr-cuenta { margin: 0; font: 800 clamp(11px, .9vw, 14px)/1.6 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-4); }
.cr-caso { margin: clamp(8px, 1.4vh, 14px) 0 clamp(16px, 2.6vh, 26px);
  font-size: clamp(22px, 2.2vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.cr-opc { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  max-width: 68rem; margin: 0 auto; }
.cr-o { font: 700 clamp(15px, 1.3vw, 22px)/1.3 var(--sans); padding: 16px 18px; border-radius: 15px;
  border: 2px solid var(--borde-2); background: var(--papel); color: var(--tinta); cursor: pointer;
  transition: border-color var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.cr-o:hover:not(:disabled) { border-color: var(--marca); }
.cr-o.bien { border-color: var(--verde-bd); background: var(--verde-bg); color: var(--verde-2); }
.cr-o.mal { border-color: var(--rojo-bd); background: var(--rojo-bg); color: var(--rojo); }
.cr-o.gris { opacity: .45; }
.cr-porque { margin: clamp(14px, 2.4vh, 24px) auto 0; max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 22px); line-height: 1.5; color: var(--tinta-2); }
.cr-grande { margin: 0 0 clamp(10px, 1.6vh, 18px); font-size: clamp(56px, 7vw, 104px);
  font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--marca); }
.cr-grande small { font-size: clamp(18px, 1.6vw, 28px); font-weight: 600; color: var(--tinta-3);
  letter-spacing: 0; }
.cr-dec .cr-cierre { max-width: 64ch; margin-left: auto; margin-right: auto; }
.cr-dec .cr-b { margin-top: clamp(14px, 2.4vh, 24px); }

/* ── 6 · el lienzo ── */
.cr-in { width: 100%; font: inherit; font-size: clamp(15px, 1.3vw, 21px); padding: 12px 16px;
  border-radius: 13px; border: 1px solid var(--borde-2); background: var(--papel);
  color: var(--tinta); }
.cr-in:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.cr-in.grande { font-size: clamp(17px, 1.5vw, 25px); font-weight: 700;
  margin-bottom: clamp(10px, 1.6vh, 16px); }
.cr-add { display: flex; gap: 10px; margin-bottom: clamp(12px, 2vh, 18px); }
.cr-add .cr-in { flex: 1; }
.cr-add .cr-b { flex: none; }

.cr-tabla { display: grid; gap: 7px; }
.cr-lp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: clamp(10px, 1.4vw, 18px);
  align-items: center; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 13px; padding: 9px 14px; }
.cr-lp > b { font-size: clamp(15px, 1.25vw, 21px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cr-lp > span { display: flex; gap: 5px; }
.cr-c { font: 700 clamp(12px, 1.02vw, 17px)/1 var(--sans); padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--borde-2); background: var(--papel); color: var(--tinta-3); cursor: pointer;
  transition: border-color var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.cr-c:hover { border-color: var(--tinta-3); }
.cr-c.on.persona { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.cr-c.on.auto { background: var(--verde-solido); border-color: var(--verde-solido); color: #fff; }
.cr-c.on.ia { background: var(--marca); border-color: var(--marca); color: #fff; }
.cr-x { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--borde);
  background: var(--papel); color: var(--tinta-4); font-size: 17px; line-height: 1; cursor: pointer; }
.cr-x:hover { border-color: var(--rojo); color: var(--rojo); }

@media (max-width: 1100px) {
  .cr-sondeo, .cr-proc { grid-template-columns: minmax(0, 1fr); }
}

/* En un proyector de 768 o 720 de alto sobra ancho y falta alto, asi que lo
   que se recorta es el aire vertical, no el tamano de la letra: en una sala
   grande, bajar el cuerpo del texto es peor que apretar los margenes. */
@media (max-height: 820px) {
  .cr-manos { padding: 11px 16px; }
  .cr-manos p { margin-bottom: 3px; }
  .cr-preg li { line-height: 1.38; }
  .cr-mandos { margin: 10px 0; }
  .cr-barras { gap: 3px; }
  .cr-barra { height: 13px; }
  .cr-pasos { gap: 5px; }
  .cr-paso { padding: 7px 13px; }
  .cr-intro { margin-bottom: 10px; }
  .cr-det { padding: 11px 14px; }
  .cr-det > div { margin-bottom: 5px; }
  .cr-cierre { margin-top: 10px; }
  .cr-caso { margin: 8px 0 14px; }
  .cr-o { padding: 12px 16px; }
}
@media (max-width: 980px) {
  .cr-fila { grid-template-columns: minmax(0, 11rem) 1fr auto; }
  .cr-paso { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cr-paso .cr-t { display: none; }
  .cr-lp { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-lp > span { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-barra i, .cr-t { transition: none; }
}

/* ══════════════════════════════════════ bloque 07 · n8n
 *
 * Prefijo n8- por lo de siempre: esta hoja ya la comparten cuatro juegos de
 * clases y una corta choca sin avisar.
 *
 * El lienzo va a la izquierda y la ficha del nodo a la derecha, igual que las
 * otras dos demos de esta sesión: un proyector es ancho y no alto, y apilado
 * esto se pasaba de los 720. */

.n8-wrap { display: grid; gap: clamp(16px, 2.2vw, 34px); align-items: start;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.n8-wrap .cr-mandos { margin-bottom: 0; }

.n8-lienzo { background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 16px; padding: clamp(8px, 1.4vh, 14px);
  /* la cuadrícula del lienzo de n8n, para que reconozcan la pantalla */
  background-image: radial-gradient(var(--borde-2) 1px, transparent 1px);
  background-size: 22px 22px; }
.n8-svg { width: 100%; height: auto; max-height: 46vh; color: var(--tinta); display: block; }
.n8-nodo { cursor: pointer; }
.n8-nodo rect { transition: fill var(--t1) var(--e-std), stroke-width var(--t1) var(--e-std); }
.n8-nodo:hover rect { stroke-width: 3; }

.n8-nom { margin: 0; font-size: clamp(18px, 1.6vw, 27px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; }
.n8-nom em { display: block; font-style: normal; font-size: clamp(12px, 1vw, 16px);
  font-weight: 700; font-family: var(--mono); color: var(--marca); letter-spacing: 0;
  margin-top: 3px; }
.n8-q { margin: clamp(8px, 1.4vh, 14px) 0; font-size: clamp(15px, 1.25vw, 21px);
  line-height: 1.45; color: var(--tinta-2); }
.n8-et { margin: clamp(10px, 1.6vh, 16px) 0 5px; font: 800 clamp(10px, .82vw, 13px)/1.7 var(--mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-4); }
.n8-dentro { margin: 0; padding-left: 1.15em; }
.n8-dentro li { font-size: clamp(14px, 1.15vw, 19px); line-height: 1.45; color: var(--tinta-2);
  margin-bottom: 4px; }
.n8-ojo { margin: clamp(10px, 1.6vh, 16px) 0 0; font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.45; color: var(--ambar); background: var(--ambar-bg);
  border-left: 3px solid var(--ambar); border-radius: 0 10px 10px 0; padding: 9px 13px; }

/* ── los tropiezos, en acordeón ── */
.n8-trop { display: grid; gap: 7px; max-width: 82ch; }
.n8-t { border: 1px solid var(--borde); border-radius: 14px; background: var(--papel-2);
  overflow: hidden; }
.n8-t.on { border-color: var(--marca); background: var(--papel); }
.n8-t button { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: clamp(10px, 1.6vh, 15px) clamp(14px, 1.8vw, 20px); }
.n8-t i { font: 800 clamp(12px, 1vw, 16px)/1 var(--mono); font-style: normal; color: var(--tinta-4);
  flex: none; }
.n8-t b { flex: 1; font-size: clamp(16px, 1.35vw, 23px); }
.n8-t button span { font-size: clamp(18px, 1.5vw, 25px); color: var(--tinta-4); font-weight: 300; }
.n8-t.on button span { color: var(--marca); }
.n8-tc { padding: 0 clamp(14px, 1.8vw, 20px) clamp(12px, 1.8vh, 18px) clamp(38px, 4vw, 56px); }
.n8-tc p { margin: 0 0 7px; font-size: clamp(14px, 1.2vw, 20px); line-height: 1.45;
  color: var(--tinta-2); }
.n8-tc i { display: block; font: 800 clamp(10px, .8vw, 13px)/1.7 var(--mono); font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-4); }
.n8-tc p.fix { color: var(--verde-2); font-weight: 600; }
.n8-tc p.fix i { color: var(--verde-solido); }

@media (max-width: 1100px) {
  .n8-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 820px) {
  .n8-svg { max-height: 40vh; }
  .n8-lienzo { padding: 7px; }
  .n8-q { margin: 8px 0; }
  .n8-et { margin: 9px 0 4px; }
  .n8-ojo { margin-top: 9px; padding: 7px 11px; }
  .n8-t button { padding: 8px 14px; }
  .n8-tc { padding-bottom: 10px; }
}

/* El ejemplo de cada escalón, dentro del SVG con foreignObject: así hereda el
   tipo y el ajuste de línea del CSS en vez de pelearse con <text> de SVG, que
   no sabe partir líneas solo. */
.esc-ej { font: 500 clamp(11px, .9vw, 14px)/1.4 var(--sans); color: var(--tinta-3);
  padding: 0 16px 0 2px; }

/* pastillas de «Qué cambia en cada peldaño»: centradas y con dos lineas
   cuando hace falta, porque <text> de SVG no parte solo */
.pel-p { display: flex; align-items: center; justify-content: center;
  height: 100%; box-sizing: border-box; padding: 0 10px; text-align: center;
  font: 700 clamp(11px, .92vw, 15px)/1.24 var(--sans); }