/*
  engine.css — sistema visual compartido del deck de Negocios Digitales.
  Base tomada de Competencias Gerenciales/deck/assets/engine.css: misma
  arquitectura de canvas fijo 1280x720 y mismos nombres de componente, para
  que content.slides.js se pueda escribir con el mismo vocabulario de clases.
  Lo que cambia es la piel: paleta lima + violeta sobre fondo gris oscuro
  (nunca negro puro) o crema (nunca blanco puro) — pedido explícito de la
  cátedra — más dos componentes nuevos al final (timer-card, index-panel).
*/

/* ---------- Tokens: piel institutional (clase estándar, fondo crema) ---------- */
:root,
.slide[data-skin="institutional"] {
  --ink: #221f17;
  --ink-soft: #5b5745;
  /* #6f6a55 y no el #918c76 de antes: el de antes daba 2,9:1 sobre el papel,
     y con él se escribían cosas que hay que leer (el «✗» de las consignas,
     los «vs.», la fuente de un enlace). Con este da 4,7:1, el mínimo WCAG
     para texto chico. Medido con scripts/legibilidad-audit.js. */
  --ink-faint: #6f6a55;
  --paper: #f3efe3;
  --paper-raised: #fcfaf3;
  --rule: rgba(34, 31, 23, 0.15);
  --accent: #6b3fd6;          /* violeta — texto/bordes/énfasis */
  --accent-strong: #4b2699;
  --accent-2: #7fb828;        /* lima — resaltado secundario */
  /* El lima sirve para rellenos y trazos, pero como letra da 2,1:1 sobre el
     papel. Cuando el lima tiene que ser texto (el ✓ de una consigna, una
     etiqueta) va este verde de la misma familia: 4,75:1. */
  --accent-2-text: #4a7510;
  --accent-tint: rgba(107, 63, 214, 0.1);
  --shadow: 0 20px 60px rgba(34, 31, 23, 0.16);
  /* Monoespaciada del sistema — sin dependencia de red: los decks se abren
     con doble clic y tienen que verse igual sin internet. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* ---------- Tokens: piel signal (momentos de mayor intensidad — mundo VUCA/BANI,
   pausas, el sorteo de equipos) — fondo gris oscuro cargado, nunca negro puro ---------- */
.slide[data-skin="signal"] {
  --ink: #f1eee3;
  --ink-soft: #c6c2b1;
  --ink-faint: #9a9681;      /* 5:1 sobre --paper-raised; el anterior daba 4,2 */
  --paper: #1e1c17;
  --paper-raised: #2a2721;
  --rule: rgba(241, 238, 227, 0.15);
  --accent: #c7e23e;          /* lima — protagonista en esta piel */
  --accent-strong: #e7f29e;
  --accent-2: #b08cff;        /* violeta claro — resaltado secundario */
  --accent-2-text: #b08cff;
  --accent-tint: rgba(199, 226, 62, 0.14);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- Reset mínimo ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, p, ul, ol, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.serif {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

/* ---------- Canvas fijo de la slide ---------- */
.slide {
  position: absolute;
  inset: 0;
  width: 1280px;
  height: 720px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}

.slide-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 76px 88px 64px;
  display: flex;
  flex-direction: column;
}

.slide-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 40px;
  margin-bottom: 44px;
  flex: 0 0 auto;
}

.kicker-act {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
  text-transform: uppercase;
}

.kicker-course {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.slide-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  scrollbar-width: none;
}
.slide-body::-webkit-scrollbar { display: none; }
/* Red de seguridad: si el contenido excede el canvas de 720px, se ve un
   degradé al pie en vez de perder el resto en silencio (avisa en pruebas). */
.slide-body.has-overflow {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
}

/* ---------- Componentes de contenido ---------- */

.slide-eyebrow {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 22px;
}

.display-title {
  font-size: 76px;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.display-sub {
  font-size: 30px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 22px;
}

.layout-title,
.layout-question {
  max-width: 980px;
}

/* Bloque centrado horizontal + vertical (pausa, cierre) */
.center-stage {
  align-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
}
.center-stage .display-sub {
  max-width: 560px;
}

.lead-question {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  max-width: 920px;
}

.fine-print {
  font-size: 22px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 32px;
}

.section-title {
  font-size: 33px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 34px;
  padding-left: 20px;
  border-left: 5px solid var(--accent);
}
.layout-table .section-title {
  margin-bottom: 22px;
}

/* Listas con viñeta */
.bullet-list li {
  position: relative;
  font-size: 25px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 34px;
  margin-bottom: 15px;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.bullet-list--muted li {
  color: var(--ink-soft);
}
.bullet-list--muted li::before {
  background: var(--ink-faint);
}
.bullet-list--tight li {
  font-size: 20px;
  margin-bottom: 9px;
}
.bullet-list--tight li::before {
  top: 10px;
}

/* Contrato con ícono por ítem (secuencia iconográfica) */
.numbered-contract {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.numbered-contract li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}
.numbered-contract li .icon-badge {
  margin-top: 1px;
}
.contract-text {
  flex: 1 1 auto;
}
.numbered-contract li strong {
  color: var(--accent-strong);
  font-weight: 700;
}

/* Lista de dimensiones (numerada simple) */
.dimension-list {
  counter-reset: dim;
}
.dimension-list li {
  counter-increment: dim;
  position: relative;
  font-size: 27px;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 50px;
  margin-bottom: 16px;
}
.dimension-list li::before {
  content: counter(dim) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--accent-strong);
  font-family: Georgia, serif;
}
.dimension-list--tight li {
  font-size: 19px;
  margin-bottom: 10px;
}

/* Flujo de proceso */
.flow-diagram {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  row-gap: 22px;
}
.flow-step {
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-raised);
  border: 2px solid var(--rule);
  border-radius: 999px;
  padding: 14px 26px;
  box-shadow: var(--shadow);
}
.flow-arrow {
  font-size: 26px;
  color: var(--accent-2);
}
.flow-tagline {
  font-size: 28px;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 48px;
}

/* Tabla de evaluación */
.eval-table {
  width: 100%;
  font-size: 21px;
}
.eval-table thead th {
  text-align: left;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0 14px;
  border-bottom: 2px solid var(--rule);
}
.eval-table thead th:last-child { text-align: right; }
.eval-table tbody td {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.eval-table tbody td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--accent-strong);
}
.table-note {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.eval-table--plain tbody td:last-child,
.eval-table--plain thead th:last-child {
  text-align: left;
  font-weight: 400;
  color: var(--ink-soft);
}
.eval-table--plain tbody td:first-child strong {
  color: var(--accent-strong);
}

/* Cita destacada (uso futuro / notas) */
blockquote.pull-quote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.6;
  color: var(--ink);
  border-left: 4px solid var(--accent);
  padding-left: 24px;
  margin: 0;
}

/* ---------- Componente visual: insignia con ícono ---------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.icon-badge--md { width: 60px; height: 60px; }
.icon-badge--md svg { width: 28px; height: 28px; }
.icon-badge--lg { width: 92px; height: 92px; }
.icon-badge--lg svg { width: 42px; height: 42px; }
.icon-badge--text {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 17px;
}
.icon-badge--text.icon-badge--sm { width: 30px; height: 30px; font-size: 14px; }
/* Anillo doble — señala un paso que es un bucle, no una etapa más de la secuencia. */
.icon-badge--loop {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--accent);
}
/* Insignia en tono lima explícito (independiente de la piel activa) — para
   marcar el paso "al azar" del sorteo dentro de una piel institutional. */
.icon-badge--lime {
  background: rgba(127, 184, 40, 0.16);
  color: #4c7a15;
}
.slide[data-skin="signal"] .icon-badge--lime {
  background: rgba(199, 226, 62, 0.18);
  color: var(--accent-strong);
}

/* ---------- Layout de dos columnas: texto + ilustración ---------- */
.slide-split {
  display: flex;
  align-items: center;
  gap: 54px;
  height: 100%;
  width: 100%;
}
.split-text {
  flex: 0 0 62%;
  min-width: 0;
}
.split-art {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-art svg {
  width: 100%;
  height: auto;
  max-height: 440px;
}
.slide-split--reverse {
  flex-direction: row-reverse;
}
.slide-split--even .split-text {
  flex-basis: 47%;
}

/* ---------------------------------------------------------------------------
   Sistema .viz — piezas gráficas de mecanismo
   ---------------------------------------------------------------------------
   Tomado del motor de "Conversar para Liderar" (deck del Encuentro 3), donde
   los gráficos se leen mucho mejor que los nuestros. La diferencia no era de
   estilo: era que allá la tinta se declara por JERARQUÍA y no por color.

   Un SVG escrito contra estos cuatro tokens no sabe de qué color es, sabe qué
   papel cumple cada trazo — y por lo tanto se re-entinta solo al caer en la
   piel signal, sin tocar el markup. Nuestras piezas viejas hardcodean
   var(--accent) / var(--paper) y por eso solo funcionan sobre un fondo.

     --viz-ink      lo que el ojo tiene que buscar primero
     --viz-soft     el trazo de soporte (la alternativa, el camino que no es)
     --viz-ghost    relleno de lo pasado, lo descartado, lo acumulado
     --viz-neutral  grilla, ejes, marcas: presente pero fuera de foco
     --viz-key      el único acento de segundo orden, para marcar UNA cosa

   Reglas de composición que van con el sistema (ver la nota de icons.js):
     · las etiquetas viven en bandas propias, nunca encima de un trazo;
     · adentro de una figura va un glifo, no texto;
     · dos niveles de tinta en las etiquetas y nada más (text / text.hi).
   --------------------------------------------------------------------------- */
.viz {
  --viz-ink: var(--accent);
  --viz-soft: rgba(107, 63, 214, 0.34);
  --viz-ghost: rgba(107, 63, 214, 0.13);
  /* El trazo neutro conserva el gris claro de siempre (una grilla no tiene
     que gritar); las etiquetas, en cambio, se escriben con --viz-label, que
     tiene contraste de texto. Lo mismo con el lima: como trazo está bien,
     como letra daba 2,1:1 sobre el papel; --viz-key-text es un verde más
     oscuro de la misma familia (4,75:1). */
  --viz-neutral: #918c76;
  --viz-key: var(--accent-2);
  --viz-label: var(--ink-faint);
  --viz-key-text: #4a7510;
  width: 100%;
  margin: 0 auto;
}
.slide[data-skin="signal"] .viz {
  --viz-ink: var(--accent);
  --viz-soft: rgba(199, 226, 62, 0.34);
  --viz-ghost: rgba(199, 226, 62, 0.12);
  --viz-neutral: #8d8975;
  --viz-key-text: var(--viz-key);
}

.viz svg {
  width: 100%;
  height: auto;
  display: block;
  /* overflow visible: las etiquetas pueden respirar fuera del viewBox sin que
     se recorten. Es lo que permite componerlas en bandas al borde. */
  overflow: visible;
}

/* Etiqueta de diagrama: monoespaciada y telegráfica, para que se lea como
   anotación técnica y no compita con el Georgia de los títulos. Se declara
   UNA vez acá en lugar de repetir font-family en cada <text>. */
.viz text {
  font-family: var(--font-mono);
  font-size: 15px;
  fill: var(--viz-label);
}
.viz text.hi { fill: var(--viz-ink); }
.viz text.key { fill: var(--viz-key-text); font-weight: 700; }

/* Formato banda: el gráfico va ancho y bajo (~3:1), entre el título y el
   cuerpo, en slide a ancho completo. Es la contracara de .split-art, que es
   casi cuadrado y vive en una columna al costado.

   La forma no es decorativa: una franja de 3:1 no admite un emblema centrado,
   obliga a desplegar el mecanismo a lo largo de un eje (antes/después, se
   acumula, se bifurca). Es la restricción que empuja a la metáfora. */
.layout-band {
  display: flex;
  flex-direction: column;
  /* Gap ajustado midiendo, no a ojo: el area util real del cuerpo de la slide
     es 496px (el kicker se come parte de los 580), y titulo + banda + pie
     entran justo. Con gap 26 se pasaba por 3px y saltaba la red de overflow. */
  gap: 18px;
  max-width: 1060px;
  width: 100%;
}
/* El viewBox de las piezas banda es 1040x280, y el area util de la slide es
   1104x580: a max-width 1040 la escala queda en 1:1, asi que un font-size 15
   adentro del SVG se ve como 15px reales. Es la razon de usar un viewBox
   grande en vez de uno de 460 y confiar en el escalado. */
.viz-band svg { max-height: 280px; }
.viz-band--tall svg { max-height: 340px; }
/* Para slides cuyo pie lleva una explicación larga: la pieza cede alto antes
   que el texto, pero poco. Antes eran 230 px, que achicaban el dibujo al 82 %
   y dejaban las etiquetas en 12 px reales: ilegibles desde el fondo. Con 262
   quedan en 14 (letra de 15 al 94 %), y es lo justo para que las cinco slides
   de pie más largo (m07, g06, g08, g16, r10) no desborden. */
.viz-band--short svg { max-height: 262px; }
.band-caption {
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 900px;
}
.band-caption strong { color: var(--ink); font-weight: 600; }

/* Declaración breve y contundente (previa a una lista o pregunta) */
.flash-statement {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 16px;
}
.flash-statement + .fine-print,
.flash-statement + .bullet-list {
  margin-top: 0;
}

/* ---------- Secuencia de íconos en fila (ej. dimensiones) ---------- */
.icon-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
}
.icon-row-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.icon-row-label {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Barra proporcional (pesos de evaluación) ---------- */
.weight-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.weight-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}

/* Cita destacada, versión grande (slides "manifiesto") */
blockquote.pull-quote--lg {
  font-size: 33px;
  line-height: 1.42;
}

/* ---------- Lista de opciones con letra (decisiones A-E) ---------- */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.option-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Grilla de indicadores (ficha ejecutiva) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.stat-tile {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: var(--shadow);
}
.stat-tile-value {
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 1;
}
.stat-tile-label {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.35;
}

/* ---------- Memo / documento simulado ---------- */
.memo-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
  padding: 26px 32px;
  box-shadow: var(--shadow);
}
.memo-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.memo-card .dimension-list li {
  font-size: 22px;
  margin-bottom: 10px;
}

/* ---------- Dos fichas comparadas ---------- */
.pro-con {
  display: flex;
  gap: 20px;
  margin: 24px 0;
}
.pro-con-tile {
  flex: 1 1 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 22px;
}
.pro-con-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.pro-con-text {
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Insignia de desbloqueo (alto contraste) ---------- */
.unlock-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.slide[data-skin="signal"] .unlock-banner {
  color: var(--paper);
}

/* ---------- Definition of done ---------- */
.dod-box {
  border: 1.5px dashed var(--accent);
  border-radius: 10px;
  padding: 16px 24px;
  margin-top: 20px;
}
.dod-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 10px;
}
.dod-box ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dod-box li {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
  padding-left: 22px;
  position: relative;
}
.dod-box li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Etiqueta de modo de trabajo ---------- */
.mode-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.mode-tag {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.mode-tag--pairs { background: var(--accent-2); color: var(--paper); }
.mode-tag--team { background: var(--accent); color: var(--paper); }
.mode-tag--plenary { background: var(--ink-soft); color: var(--paper); }
.slide[data-skin="signal"] .mode-tag--team,
.slide[data-skin="signal"] .mode-tag--pairs { color: #1e1c17; }
.mode-tag-arrow { color: var(--ink-faint); font-size: 13px; }

/* ---------- Chat/documento interno simulado ---------- */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.chat-msg {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.chat-msg strong {
  color: var(--accent-strong);
}
.chat-msg-time {
  color: var(--ink-faint);
  font-size: 11.5px;
  margin-left: 4px;
}

/* ---------- Etiqueta "próximo encuentro" ---------- */
.next-class-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-tint);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

/* ==================================================================
   Componentes nuevos para Negocios Digitales
   ================================================================== */

/* ---------- Tarjeta de concepto a investigar (jigsaw VUCA/BANI/Cynefin/Cono) ---------- */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.concept-grid--cols4 {
  grid-template-columns: repeat(4, 1fr);
}
/* 6 tarjetas (las 6D de la Clase 2) entran en 3x2; con la grilla de 5 por
   defecto quedaría una huérfana en la segunda fila. */
.concept-grid--cols3 {
  grid-template-columns: repeat(3, 1fr);
}
/* Con 3 columnas sobra ancho por tarjeta: se agranda el cuerpo respecto de la
   grilla de 5, que en un aula proyectada queda al límite de lo legible. */
.concept-grid--cols3 .concept-card { padding: 17px 19px; gap: 9px; }
.concept-grid--cols3 .concept-card-letter { font-size: 15px; }
.concept-grid--cols3 .concept-card-name { font-size: 22px; }
.concept-grid--cols3 .concept-card-brief { font-size: 15.5px; line-height: 1.44; }
.concept-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 15px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.concept-card-letter {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-strong);
  letter-spacing: 0.04em;
}
.concept-card-name {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.18;
}
.concept-card-brief {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.concept-card--lime { border-color: var(--accent-2); }
.concept-card--violet { border-color: var(--accent); }

/* ---------- Grilla 2x2 con centro flotante (Marco Cynefin) ---------- */
.quadrant-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.quadrant-cell {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--shadow);
}
.quadrant-cell-tag {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.quadrant-cell-name {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.quadrant-cell-text {
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--ink-soft);
}
.quadrant-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 2;
  white-space: nowrap;
}

/* ---------- Cronómetro de actividad (timer.js) ---------- */
.timer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 26px;
  box-shadow: var(--shadow);
  margin-top: 28px;
}
.timer-clock-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.timer-clock {
  font-family: Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: 46px;
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 1;
}
.timer-caption {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.timer-controls {
  display: flex;
  gap: 10px;
}
.timer-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--accent-tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
.timer-btn:hover { filter: brightness(1.06); }
.timer-btn:active { transform: scale(0.97); }
.timer-btn--primary {
  background: var(--accent);
  color: var(--paper);
  border-color: transparent;
}
.timer-card.is-warning .timer-clock { color: #c2542e; }
.timer-card.is-warning { border-color: #c2542e; }
.timer-card.is-done .timer-clock { color: #c2542e; }
.timer-card.is-done { border-color: #c2542e; background: rgba(194, 84, 46, 0.08); }

/* ---------- Business Model Canvas (Clase 3) — 9 bloques, forma real -------
   Usa grid-template-areas para reproducir la disposición clásica: socios y
   segmentos ocupan las columnas altas de los extremos, propuesta de valor va
   destacada al centro, y costos/ingresos arman la franja inferior. */
.bmc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto) auto;
  grid-template-areas:
    "partners activities value relationships segments"
    "partners resources value channels segments"
    "costs costs revenue revenue revenue";
  gap: 9px;
}
.bmc-cell {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: var(--shadow);
}
/* ---------------------------------------------------------------------------
   Lean Canvas — 9 cajas
   ---------------------------------------------------------------------------
   Reusa el chapado de .bmc-cell y solo cambia la grilla. Ojo con el conteo:
   la Guía de Sprints del TPI dice "las 8 secciones" en el texto y en las
   Condiciones de Satisfacción, pero después dibuja y enumera NUEVE cajas
   (Problema, Solución, Propuesta de valor única, Ventaja injusta, Segmentos,
   Métricas clave, Canales, Estructura de costos, Fuentes de ingreso). Nueve
   es el Lean Canvas canónico de Maurya, así que el deck usa nueve. La
   discrepancia del texto de la guía queda pendiente de corregir.
   --------------------------------------------------------------------------- */
.lean-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "problema solucion valor ventaja segmentos"
    "problema metricas valor canales segmentos"
    "costos   costos   costos ingresos ingresos";
  gap: 9px;
}
.lean-grid .bmc-cell--problema { grid-area: problema; }
.lean-grid .bmc-cell--solucion { grid-area: solucion; }
.lean-grid .bmc-cell--valor { grid-area: valor; background: var(--accent); border-color: transparent; }
.lean-grid .bmc-cell--ventaja { grid-area: ventaja; }
.lean-grid .bmc-cell--segmentos { grid-area: segmentos; }
.lean-grid .bmc-cell--metricas { grid-area: metricas; }
.lean-grid .bmc-cell--canales { grid-area: canales; }
.lean-grid .bmc-cell--costos { grid-area: costos; }
.lean-grid .bmc-cell--ingresos { grid-area: ingresos; }
.lean-grid .bmc-cell--valor .bmc-cell-label,
.lean-grid .bmc-cell--valor .bmc-cell-q { color: var(--paper); }
.lean-grid .bmc-cell--valor .bmc-cell-label { opacity: 0.85; }
/* De dónde sale cada caja: el sprint que ya la produjo */
.lean-origin {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2-text);
  margin-top: 2px;
}
.lean-grid .bmc-cell--valor .lean-origin { color: var(--paper); opacity: 0.8; }

.bmc-cell--partners { grid-area: partners; }
.bmc-cell--activities { grid-area: activities; }
.bmc-cell--resources { grid-area: resources; }
.bmc-cell--value { grid-area: value; background: var(--accent); border-color: transparent; }
.bmc-cell--relationships { grid-area: relationships; }
.bmc-cell--channels { grid-area: channels; }
.bmc-cell--segments { grid-area: segments; }
.bmc-cell--costs { grid-area: costs; }
.bmc-cell--revenue { grid-area: revenue; }
.bmc-cell-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.bmc-cell--value .bmc-cell-label,
.bmc-cell--value .bmc-cell-q { color: var(--paper); }
.bmc-cell--value .bmc-cell-label { opacity: 0.85; }
.bmc-cell-q {
  font-size: 12px;
  line-height: 1.34;
  color: var(--ink-soft);
}

/* ---------- Value Proposition Canvas (Clase 3) — dos paneles enfrentados -- */
.vpc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.vpc-panel {
  display: flex;
  flex-direction: column;
}
.vpc-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--accent-strong);
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}
.vpc-item {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  padding: 11px 15px;
  margin-bottom: 9px;
  box-shadow: var(--shadow);
}
.vpc-item-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.vpc-item-text { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }

/* ---------- Ficha de buyer persona (Clase 3) ------------------------------ */
.persona-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
}
.persona-avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 22px;
}
.persona-body { flex: 1 1 auto; min-width: 0; }
.persona-name { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.persona-tag { font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; }
.persona-facts { display: flex; flex-direction: column; gap: 6px; }
.persona-fact { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.persona-fact b { color: var(--ink); font-weight: 650; }

/* ---------- Enlaces a recursos (videos, herramientas) ----------------------
   En una clase proyectada nadie clickea la pantalla, así que el chip muestra
   también la URL legible: sirve de referencia visual mientras el enlace real
   vive en el campus. Es <a>, no <div>, para que funcione al abrir el deck en
   una notebook y para que el foco de teclado lo alcance. */
.resource-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 20px 12px 16px;
  text-decoration: none;
  box-shadow: var(--shadow);
  max-width: 100%;
}
.resource-link:hover { background: var(--accent-tint); }
.resource-link:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.resource-link-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 13px;
  line-height: 1;
}
.resource-link-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.resource-link-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.resource-link-url {
  font-size: 12.5px;
  color: var(--ink-faint);
  word-break: break-all;
}

/* ---------- Fichas de MTP: organización + su propósito, citado ----------
   La frase es la protagonista (va en serif, tamaño de cita); el nombre de la
   organización queda arriba como etiqueta chica. */
.mtp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mtp-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mtp-card-org {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.mtp-card-phrase {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.36;
  color: var(--ink);
}
.mtp-card--muted {
  border-left-color: var(--ink-faint);
}
.mtp-card--muted .mtp-card-org { color: var(--ink-faint); }
.mtp-card--muted .mtp-card-phrase { color: var(--ink-soft); }

/* ==================================================================
   Clase 3 — Del síntoma a la causa
   ================================================================== */

/* ---------- Árbol del problema ---------------------------------------------
   Es EL diagrama de la clase, así que se dibuja con su forma real (ramas
   arriba, tronco al medio, raíces abajo) y no como una lista de viñetas.
   Va en CSS y no en SVG para que el texto quede seleccionable y el docente
   pueda leerlo de la pantalla sin forzar la vista. */
.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.tree-band {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.tree-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
  text-align: center;
}
.tree-node {
  flex: 1 1 0;
  min-width: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.36;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.tree-node--branch { border-top: 3px solid var(--accent-2); }
.tree-node--root { border-bottom: 3px solid var(--accent); }
/* El tronco es el único bloque lleno: es el problema central, y tiene que
   leerse como el ancla de la que cuelga todo lo demás. */
.tree-trunk {
  background: var(--accent);
  color: var(--paper);
  border-radius: 11px;
  padding: 16px 26px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  max-width: 72%;
  box-shadow: var(--shadow);
}
/* Conector vertical entre bandas. El gradiente hace que la línea "salga" del
   bloque en vez de chocarlo. */
.tree-stem {
  width: 3px;
  height: 26px;
  background: linear-gradient(var(--rule), var(--accent));
  border-radius: 2px;
}
.tree-stem--up { background: linear-gradient(var(--accent-2), var(--rule)); }

/* ---------- Cadena de los 5 por qué ---------------------------------------- */
.why-chain {
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: why;
}
.why-step {
  counter-increment: why;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 11px 16px;
  box-shadow: var(--shadow);
}
/* Cada escalón se indenta un poco más: la sangría creciente ES el descenso
   hacia la causa raíz, sin necesidad de explicarlo. */
.why-step:nth-child(2) { margin-left: 26px; }
.why-step:nth-child(3) { margin-left: 52px; }
.why-step:nth-child(4) { margin-left: 78px; }
.why-step:nth-child(5) { margin-left: 104px; }
.why-step::before {
  content: "¿por qué?";
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--accent-strong);
  padding-top: 2px;
}
.why-text { font-size: 15px; line-height: 1.4; color: var(--ink); }
.why-step--root { border-color: var(--accent); border-left: 4px solid var(--accent); }
.why-step--root::before { content: "raíz"; font-style: normal; font-weight: 700; }

/* ---------- Comparación a dos columnas (contrastes conceptuales) ----------- */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
}
.versus-side {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.versus-side--a { border-top: 4px solid var(--ink-faint); }
.versus-side--b { border-top: 4px solid var(--accent); }
.versus-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.versus-sub { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 14px; }
.versus-list { display: flex; flex-direction: column; gap: 9px; }
.versus-item { font-size: 14px; line-height: 1.4; color: var(--ink-soft); padding-left: 16px; position: relative; }
.versus-item::before { content: "·"; position: absolute; left: 3px; color: var(--accent); font-weight: 700; }
.versus-mid {
  align-self: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   Tarjeta de consigna (desde la Clase 6, 2026-09-15)
   ---------------------------------------------------------------------------
   Nace de medir los decks: 22 de 27 rondas con reloj decían QUÉ hacer pero no
   mostraban CÓMO SE VE bien hecho, así que el alumno dependía del docente para
   saber si había terminado. La tarjeta fija cinco partes y no se usa sin la
   última:

     Qué hacen      → el título
     Pasos          → lista corta, en orden
     Tiempo         → el cronómetro
     Qué sale       → el producto concreto de la ronda, en una línea
     Así se ve bien → un ejemplo del resultado (✓) y, al lado, el error más
                      probable (✗). El contraste enseña más que el ejemplo solo.

   Izquierda: hacer. Derecha: con qué comparar lo hecho.
   --------------------------------------------------------------------------- */
.consigna { width: 100%; max-width: 1090px; }
.consigna .mode-tag-row { margin-bottom: 10px; }
.consigna .section-title { font-size: 30px; margin-bottom: 18px; }
.consigna-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 26px;
  align-items: start;
}
.consigna-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.consigna-pasos { counter-reset: paso; }
.consigna-pasos li {
  counter-increment: paso;
  position: relative;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 34px;
  margin-bottom: 8px;
}
.consigna-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.consigna .timer-card { margin-top: 14px; padding: 12px 20px; gap: 16px; }
.consigna .timer-clock { font-size: 38px; }
.consigna .timer-btn { padding: 8px 13px; font-size: 13px; white-space: nowrap; }
.consigna-sale {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  margin-bottom: 16px;
}
.consigna-bien {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.consigna-bien-fila {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  font-size: 16.5px;
  line-height: 1.42;
  padding: 7px 0;
}
.consigna-bien-fila + .consigna-bien-fila { border-top: 1px solid var(--rule); }
.consigna-bien-fila .marca { font-weight: 700; font-size: 17px; }
.consigna-bien-fila.si { color: var(--ink); }
.consigna-bien-fila.si .marca { color: var(--accent-2-text); }
.consigna-bien-fila.no { color: var(--ink-faint); }
.consigna-bien-fila.no .marca { color: var(--ink-faint); }

/* Entrada y salida de concepto de cada clase */
.objetivos li, .ideas-hoy li { font-size: 21px; }
.ideas-hoy .contract-text strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Modo lectura (lectura.html) — ver la nota de assets/reader.js
   ---------------------------------------------------------------------------
   Esta hoja la comparten la proyección y la lectura, pero estas reglas solo se
   aplican en lectura.html: ahí el body SÍ scrollea y las slides se muestran
   escaladas, una debajo de otra, con su texto explicativo al lado del canvas.
   --------------------------------------------------------------------------- */
/* main.css traba el scroll en html Y body (la presentación ocupa la ventana
   fija). Destrabar solo el body no alcanza: el que scrollea es el html. */
html.modo-lectura,
html:has(body.modo-lectura),
body.modo-lectura {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  height: auto;
  min-height: 100%;
}
.lectura-wrap { max-width: 1240px; margin: 0 auto; padding: 44px 28px 90px; }
.lectura-portada { border-bottom: 1px solid var(--rule); padding-bottom: 26px; margin-bottom: 8px; }
.lectura-portada h1 {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  margin: 10px 0 12px;
}
.lectura-portada .lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.lectura-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.lectura-filtro { display: inline-flex; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; }
.lectura-filtro button {
  border: none; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
}
.lectura-filtro button.on { background: var(--accent); color: var(--paper); }
.lectura-volver {
  margin-left: auto; font-size: 14px; font-weight: 600;
  color: var(--accent-strong); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.lectura-acto {
  font-family: Georgia, serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  display: flex; gap: 10px; align-items: baseline;
  margin: 46px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.lectura-acto-num {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-strong);
}
.lectura-item { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.lectura-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.lectura-num {
  font-family: Georgia, serif; font-size: 13px; font-weight: 700;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.lectura-short { font-size: 15px; font-weight: 700; color: var(--ink); }
.lectura-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-tint);
  border-radius: 999px; padding: 3px 10px;
}
/* La slide va escalada adentro de esta caja; overflow hidden porque el canvas
   mide 1280x720 y se transforma con scale desde la esquina superior izquierda. */
.lectura-mini {
  position: relative;
  width: 100%;
  max-width: 660px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.lectura-mini .slide { transition: none; }
.lectura-mini { cursor: zoom-in; }
.lectura-mini:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
/* Aviso de que la slide se abre grande. Va siempre, pero en un celular es
   lo que hace legible la slide: ahí se muestra más fuerte. */
.lectura-ampliar {
  position: absolute; right: 8px; bottom: 8px; z-index: 5;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--paper); background: var(--accent-strong);
  border-radius: 999px; padding: 4px 10px;
  opacity: 0; transition: opacity 0.15s ease;
}
.lectura-mini:hover .lectura-ampliar, .lectura-mini:focus-visible .lectura-ampliar { opacity: 1; }
@media (max-width: 720px) { .lectura-ampliar { opacity: 1; font-size: 13px; } }
.lectura-grande {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 18, 14, 0.92);
  display: flex; flex-direction: column;
}
.lectura-grande-cerrar {
  align-self: flex-end; margin: 10px 12px 6px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: #f1eee3; background: transparent;
  border: 1px solid rgba(241, 238, 227, 0.4); border-radius: 999px;
  padding: 7px 16px; cursor: pointer;
}
.lectura-grande-pista {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  font-size: 13px; color: rgba(241, 238, 227, 0.8); pointer-events: none;
}
.lectura-grande-marco {
  flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: safe center; justify-content: safe center;
}
.lectura-grande-caja { position: relative; flex: 0 0 auto; overflow: hidden; border-radius: 8px; }
.lectura-grande-caja .slide { transition: none; }
.lectura-texto {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 68ch;
  margin-top: 18px;
}
.lectura-texto p { margin-bottom: 10px; }
.lectura-texto p:last-child { margin-bottom: 0; }
.lectura-texto strong { font-weight: 700; }
.lectura-falta { color: var(--ink-faint); }
/* Filtro por carril: la vista «Solo conceptos» es, en los hechos, la masterclass */
body.solo-concepto .lectura-item[data-track="sprint"] { display: none; }
@media (min-width: 1060px) {
  .lectura-item { display: grid; grid-template-columns: 660px 1fr; gap: 30px; align-items: start; }
  .lectura-head { grid-column: 1 / -1; margin-bottom: 0; }
  .lectura-texto { margin-top: 0; font-size: 16.5px; }
}