/* Modo clase. Todo está dimensionado para un proyector, no para una laptop:
 * el cuerpo de texto arranca en 26px y los títulos escalan con el ancho de la
 * pantalla, así que en una sala grande se lee desde el fondo.
 *
 * Los pasos entran con `.pz` → `.revelado`. NO puede llamarse `dentro`: estilo.css
 * usa `.dentro` para el contenedor de la guía (max-width 1040 + margin auto) y
 * cada paso revelado heredaba ese ancho y se centraba solo, así que las tarjetas
 * salían de anchos distintos. Mientras un paso no ha llegado ocupa
 * su sitio pero no se ve: si se ocultara con display:none el diagrama saltaría
 * al aparecer cada pieza. */

body.clase {
  margin: 0; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(74,58,193,.10), transparent 62%),
    radial-gradient(760px 480px at 100% 100%, rgba(18,146,76,.06), transparent 60%),
    var(--lienzo);
}

.e-barra-fondo { height: 4px; background: var(--borde); flex: none; }
.e-barra-fondo i { display: block; height: 100%; background: var(--marca);
  transition: width var(--t3) var(--e-std); }

.e-escenario { flex: 1; min-height: 0; display: grid; place-items: center;
  padding: clamp(20px, 3vh, 48px) clamp(24px, 4vw, 72px); }
.e-escena { width: 100%; max-width: 1500px; max-height: 100%; overflow: auto;
  scrollbar-width: none; animation: surge var(--t4) var(--e-enf) both; }
.e-escena::-webkit-scrollbar { display: none; }

/* ── pasos ── */
.pz { opacity: 0; transform: translateY(14px);
  transition: opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out); }
.pz.revelado { opacity: 1; transform: none; }
g.pz { transform-origin: center; }

/* ── tipografía de escenario ── */
.e-titulo { font-size: clamp(34px, 4.4vw, 62px); font-weight: 300; letter-spacing: -.04em;
  line-height: 1.02; margin: 0 0 10px; color: var(--tinta); }
.e-titulo b { font-weight: 800; }
.e-sub { font-size: clamp(18px, 1.5vw, 24px); color: var(--tinta-3); margin: 0 0 clamp(18px, 3vh, 38px); }
.e-et { font: 700 clamp(12px, 1vw, 15px)/1.6 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-4); margin: 0 0 16px; }
.e-titan { font-size: clamp(52px, 8vw, 128px); font-weight: 200; letter-spacing: -.05em;
  line-height: .96; margin: 0 0 clamp(20px, 4vh, 44px); color: var(--tinta); }
.e-titan b { font-weight: 800; color: var(--marca); }
.e-lead { font-size: clamp(20px, 1.9vw, 32px); line-height: 1.42; color: var(--tinta-2);
  margin: 0 0 clamp(16px, 3vh, 34px); max-width: 30ch; }
.e-centro { text-align: center; }
.e-centro .e-lead { margin-left: auto; margin-right: auto; max-width: 34ch; }
.e-centro-izq .e-lead { max-width: 46ch; }
.e-url { font: 800 clamp(22px, 2.6vw, 44px)/1.3 var(--mono); color: var(--marca);
  letter-spacing: -.02em; margin: 0; }

/* ── cifras de portada ── */
.e-cifras { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.e-cifras > div { background: var(--papel); border: 1px solid var(--borde); border-radius: 18px;
  padding: clamp(16px, 2vh, 26px) clamp(20px, 2vw, 34px); box-shadow: var(--sombra); min-width: 180px; }
.e-cifras b { display: block; font-size: clamp(34px, 3.4vw, 56px); font-weight: 800;
  letter-spacing: -.04em; color: var(--marca); line-height: 1; }
.e-cifras span { display: block; font-size: clamp(13px, 1vw, 17px); color: var(--tinta-3); margin-top: 8px; }

/* ── figuras ── */
.e-fig { display: grid; place-items: center; }
.e-svg { width: 100%; height: auto; max-height: 62vh; color: var(--tinta); display: block; }
.e-fig.ancha .e-svg { max-height: 56vh; }
.e-pie { font-size: clamp(17px, 1.4vw, 24px); color: var(--tinta-2); text-align: center;
  margin: clamp(14px, 2.4vh, 30px) auto 0; max-width: 64ch; }
.e-pie b { color: var(--tinta); }

/* ── figura + notas al lado ── */
.e-dos { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px); align-items: center; }
.e-notas { display: flex; flex-direction: column; gap: 12px; }
.e-nota { background: var(--papel); border: 1px solid var(--borde); border-left: 4px solid var(--marca);
  border-radius: 14px; padding: 11px 16px; box-shadow: var(--sombra); }
.e-nota b { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: clamp(16px, 1.3vw, 21px); margin-bottom: 3px; }
.e-nota em { font: 700 clamp(11px, .85vw, 14px)/1 var(--mono); font-style: normal;
  color: var(--tinta-4); letter-spacing: .02em; margin-left: auto; }
.e-nota span { font-size: clamp(13px, 1.05vw, 17px); color: var(--tinta-2); }
.e-notas .pz:last-child .e-nota { border-left-color: var(--verde-solido); }

/* ── cajas de ejemplo ── */
.e-caja { background: var(--papel); border: 1px solid var(--borde); border-radius: 16px;
  padding: clamp(16px, 2vh, 24px) clamp(18px, 2vw, 28px); font-size: clamp(17px, 1.5vw, 25px);
  color: var(--tinta-2); box-shadow: var(--sombra); margin-bottom: 14px; max-width: 62ch; }
.e-caja i { display: block; font: 800 clamp(10px, .8vw, 13px)/1.8 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-4); font-style: normal; margin-bottom: 4px; }
.e-caja.ojo { background: var(--ambar-bg); border-color: var(--ambar-bd); }
.e-caja.ojo i { color: var(--ambar); }

/* ── el par flojo / bueno ── */
.e-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(14px, 2vw, 26px); }
.e-lado { border-radius: 18px; padding: clamp(18px, 2.4vh, 30px) clamp(20px, 2vw, 30px);
  font-size: clamp(16px, 1.35vw, 23px); line-height: 1.45; }
.e-lado i { display: block; font: 800 clamp(10px, .8vw, 13px)/1.8 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; font-style: normal; margin-bottom: 8px; }
.e-lado.mal { background: var(--rojo-bg); border: 2px solid var(--rojo-bd); }
.e-lado.mal i { color: var(--rojo); }
.e-lado.bien { background: var(--verde-bg); border: 2px solid var(--verde-bd); }
.e-lado.bien i { color: var(--verde-2); }

/* ── demos a tamaño de sala ── */
.e-escena.con-demo #e-demo { background: var(--papel); border: 1px solid var(--borde-pr);
  border-radius: 22px; padding: clamp(20px, 3vh, 34px); box-shadow: var(--sombra-alta); }
.con-demo .demo { gap: 18px; }
.con-demo .d-campo { font-size: clamp(18px, 1.5vw, 26px); }
.con-demo .tok { font-size: clamp(15px, 1.2vw, 20px); padding: 6px 9px; }
.con-demo .d-kpi b { font-size: clamp(28px, 2.6vw, 44px); }
.con-demo .d-kpi { font-size: clamp(13px, 1vw, 17px); }
/* el mapa + leyenda + vecinos + nota no cabian en 768px de alto */
.con-demo .d-mapa { height: min(40vh, 440px); }
.con-demo .d-leyenda { font-size: clamp(12px, .95vw, 15px); }
.con-demo .d-vecinos { padding: 12px 16px; }
.con-demo .d-mapa .pt { font-size: clamp(12px, 1vw, 15px); padding: 6px 12px; }
.con-demo .d-salida { font-size: clamp(18px, 1.5vw, 26px); }
.con-demo .d-prompt { font-size: clamp(15px, 1.2vw, 20px); }
.con-demo .d-vent .et { font-size: clamp(14px, 1.1vw, 18px); }
.con-demo .d-fila > b { font-size: clamp(24px, 2vw, 34px); }
.con-demo .d-ojo { font-size: clamp(13px, 1.05vw, 17px); }
.con-demo .d-vec-fila { font-size: clamp(15px, 1.2vw, 20px); }

/* ── mandos ── */
.e-mandos { flex: none; display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(16px, 2vw, 28px); background: rgba(255,255,255,.8);
  backdrop-filter: blur(14px); border-top: 1px solid var(--borde); }
.e-mandos .logo { height: 15px; width: auto; opacity: .65; }
.e-pos { font: 700 13px/1 var(--mono); color: var(--tinta-3); }
.e-ayuda { font-size: 12.5px; color: var(--tinta-4); margin-right: auto; }
.e-b { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--borde-2);
  background: var(--papel); color: var(--tinta-2); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
  transition: border-color var(--t1) var(--e-std), color var(--t1) var(--e-std); }
.e-b:hover { border-color: var(--marca); color: var(--marca); }

@media (max-width: 880px) {
  .e-dos { grid-template-columns: minmax(0, 1fr); }
  .e-ayuda { display: none; }
  .e-svg { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .pz { transition: none; }
  .e-escena { animation: none; }
}