/* ============================================================
   TALLER · Alfabetización Digital Crítica · Proyecto Ubuntu
   ------------------------------------------------------------
   Modo Read: la meta es que se entienda, y después que valga la
   pena quedarse. Mismo mundo de lámina que la portada, pero
   compuesto para leer: una lámina por bloque, medida de lectura
   corta, y la navegación siempre a la vista.

   Antes vivía dentro de index.html como una segunda "vista".
   Salió a su propio archivo: la portada ya no carga 14
   diapositivas para un visitante que viene a ver si le hacemos
   la app a su negocio, y el taller gana una dirección propia
   que se puede mandar por WhatsApp.
   ============================================================ */

/* ── Marco fijo ─────────────────────────────────────────── */
body { overflow: hidden; }

.tl-cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 58px;
  display: flex; align-items: center; gap: var(--e4);
  padding-inline: var(--e4);
  background: var(--noche);
  border-bottom: 1px solid var(--linea);
}
.tl-cab .marca { display: flex; align-items: center; gap: 9px; text-decoration: none;
                 min-height: 44px; }   /* el logo tambien se toca */
.tl-cab .marca-ico { width: 28px; height: 28px; }
.tl-cab .marca-logo { width: 29px; height: 39px; object-fit: contain; }
.tl-cab .marca-tx { font-weight: 800; font-stretch: 112%; font-size: 14px; line-height: 1; }
.tl-cab .marca-tx .b { color: var(--tiza); }
.tl-cab .marca-tx .c { color: var(--arena); }
.tl-cab .der { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }

/* La barra de avance: una regla que se llena. */
.tl-prog {
  position: fixed; top: 58px; left: 0; right: 0; z-index: 60;
  height: 2px;
  background: var(--sol);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .34s var(--sal);
}

/* ── Láminas ────────────────────────────────────────────── */
.tl-laminas {
  position: fixed; inset: 60px 0 76px;
  overflow: hidden;
}
.lam {
  position: absolute; inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e6) var(--e5) var(--e7);
  opacity: 0; visibility: hidden;
  transform: translateX(24px);
  transition: opacity .34s var(--sal), transform .38s var(--sal), visibility .34s;
}
.lam.on { opacity: 1; visibility: visible; transform: none; }
.lam.sale { transform: translateX(-24px); }
.lam-in { max-width: 780px; margin-inline: auto; }

@media (max-width: 620px) { .lam { padding: var(--e5) var(--e4) var(--e7); } }

/* Cada lámina lleva su número y su bloque: acá la secuencia SÍ
   es información — el asistente necesita saber dónde va y
   cuánto queda. */
.lam-n {
  font-family: 'Teko', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: var(--sol);
  margin-bottom: var(--e1);
}
.lam-bloque {
  font-size: 13.5px; color: var(--tiza-3);
  border-bottom: 1px solid var(--linea);
  padding-bottom: var(--e3);
  margin-bottom: var(--e5);
}
.lam h1, .lam h2 { margin-bottom: var(--e4); }
.lam-cuerpo { font-size: 16.5px; line-height: 1.62; color: var(--tiza-2); max-width: 62ch; }
.lam-cuerpo + .lam-cuerpo { margin-top: var(--e3); }
.lam-cuerpo b, .lam-cuerpo strong { color: var(--tiza); }
.lam-cuerpo em { color: var(--arena); font-style: italic; }

/* Píldoras de dato de la portada del taller */
.tl-pills { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.tl-pill {
  border: 1px solid var(--linea-viva);
  border-radius: var(--r2);
  padding: 8px var(--e3);
  font-size: 13.5px; color: var(--tiza-2);
}
.tl-pill b { color: var(--tiza); }

/* ── Índice de la ruta ──────────────────────────────────── */
.tl-indice {
  display: grid; gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
}
.tl-idx {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  min-height: 54px;
  background: var(--noche-alta);
  text-align: left;
  font-size: 15.5px;
  transition: background-color .18s var(--sal), color .18s var(--sal);
}
.tl-idx:hover { background: var(--noche-mas); color: var(--sol); }
.tl-idx .n {
  font-family: 'Teko', sans-serif; font-size: 12px;
  color: var(--tiza-3); flex: 0 0 auto; min-width: 24px;
}
.tl-idx .fl { width: 17px; height: 17px; margin-left: auto; color: var(--tiza-3); flex: 0 0 auto; }
.tl-idx:hover .fl { color: var(--sol); }

/* ── Caja de "lijado": el término crudo contra el término
      entendido. Es la mecánica central del taller, así que
      tiene su propio componente. ── */
.lij {
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  padding: var(--e4);
  margin-top: var(--e4);
  background: var(--noche-alta);
}
.lij-rot {
  font-family: 'Teko', sans-serif;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--arena);
  margin-bottom: var(--e2);
}
.lij p { font-size: 16px; line-height: 1.6; color: var(--tiza-2); }
.lij p em { color: var(--arena); font-style: italic; }
.lij p b, .lij p strong { color: var(--tiza); }
.lij.inutil { background: transparent; border-style: dashed; }
.lij.inutil p { color: var(--tiza-3); font-style: italic; }

/* Cita: una regla vertical de 1px y nada más. Un border-left
   de color grueso es el atajo que este mundo no usa. */
.cita {
  border-left: 1px solid var(--sol);
  padding: var(--e2) 0 var(--e2) var(--e4);
  margin-top: var(--e5);
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.4;
  color: var(--tiza);
}
.cita em { color: var(--arena); font-style: italic; }

/* ── Rejillas de contenido ──────────────────────────────── */
.tl-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea);
          border: 1px solid var(--linea); border-radius: var(--r2); margin-top: var(--e5); }
@media (max-width: 680px) { .tl-dos { grid-template-columns: 1fr; } }
.tl-col { background: var(--noche-alta); padding: var(--e4); }
.tl-col h3 {
  font-family: 'Teko', sans-serif;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--arena); font-weight: 600;
  margin-bottom: var(--e3);
}
.tl-col ul { list-style: none; display: grid; gap: var(--e2); }
.tl-col li { font-size: 15px; color: var(--tiza-2); display: flex; gap: var(--e2); }
.tl-col li::before { content: ''; width: 7px; height: 7px; margin-top: 7px; flex: 0 0 auto;
                     background: var(--rc, var(--tiza-3)); border-radius: 1px; }

/* Barreras cognitivas: reglones, no tarjetas apiladas. */
.barrera { border-top: 1px solid var(--linea); padding: var(--e4) 0; }
.barrera:last-child { border-bottom: 1px solid var(--linea); }
.barrera-t { font-size: 17px; font-weight: 700; font-stretch: 106%; margin-bottom: var(--e2); }
.barrera-t span { font-family: 'Teko', sans-serif; font-size: 12px;
                  color: var(--tiza-3); margin-right: var(--e2); }
.barrera-c { font-size: 15.5px; color: var(--tiza-2); max-width: 62ch; }
.barrera-s { font-size: 15px; color: var(--arena); margin-top: var(--e2); max-width: 62ch; }

/* Fórmula D·A·R */
.dar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea);
       border: 1px solid var(--linea); border-radius: var(--r2); margin-top: var(--e5); }
@media (max-width: 680px) { .dar { grid-template-columns: 1fr; } }
.dar-c { background: var(--noche-alta); padding: var(--e4); }
.dar-l { font-size: 40px; font-weight: 800; font-stretch: 118%; line-height: 1;
         color: var(--rc); margin-bottom: var(--e2); }
.dar-w { font-size: 17px; font-weight: 700; margin-bottom: var(--e1); }
.dar-d { font-size: 14.5px; color: var(--tiza-2); }

/* Tabla de ciclos */
.tl-tabla { width: 100%; border-collapse: collapse; margin-top: var(--e5); font-size: 15px; }
.tl-tabla th, .tl-tabla td { text-align: left; padding: var(--e3); border: 1px solid var(--linea); vertical-align: top; }
.tl-tabla th { font-size: 14px; font-weight: 700; background: var(--noche-alta); }
.tl-tabla .th-pas { color: var(--ray-1); }
.tl-tabla .th-pro { color: var(--ray-4); }
.tl-tabla td:first-child { font-family: 'Teko', sans-serif; font-size: 11.5px;
                           color: var(--tiza-3); text-transform: uppercase; white-space: nowrap; }
.tl-tabla-env { overflow-x: auto; }

/* Cinco cambios / pasos numerados */
.cambio { display: grid; grid-template-columns: 44px 1fr; gap: var(--e3);
          border-top: 1px solid var(--linea); padding: var(--e4) 0; }
.cambio:last-child { border-bottom: 1px solid var(--linea); }
.cambio-n { font-family: 'Teko', sans-serif; font-size: 13px; color: var(--sol); padding-top: 3px; }
.cambio b { display: block; font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.cambio span { font-size: 15px; color: var(--tiza-2); }

/* Ficha del facilitador */
.perfil { border: 1px solid var(--linea); border-radius: var(--r2);
          background: var(--noche-alta); padding: var(--e5); margin-top: var(--e5); }
.perfil-n { font-size: 23px; font-weight: 700; font-stretch: 108%; }
.perfil-r { font-family: 'Teko', sans-serif; font-size: 12.5px; letter-spacing: .02em;
            color: var(--arena); margin: var(--e2) 0 var(--e4); }
.perfil-b { font-size: 15.5px; color: var(--tiza-2); line-height: 1.62; }

/* Bloque de prompt copiable */
.prompt {
  position: relative;
  border: 1px solid var(--linea-viva);
  border-radius: var(--r2);
  background: var(--noche-honda);
  padding: var(--e5) var(--e4) var(--e4);
  margin-top: var(--e4);
  font-family: 'Teko', sans-serif;
  font-size: 14px; line-height: 1.62;
  color: var(--tiza-2);
}
.prompt em { color: var(--arena); font-style: normal; }
.copiar {
  position: absolute; top: var(--e2); right: var(--e2);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r1);
  padding: 5px 10px;
  font-family: 'Teko', sans-serif; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tiza-2);
  transition: border-color .18s var(--sal), color .18s var(--sal);
}
.copiar:hover { border-color: var(--sol); color: var(--sol); }
.copiar.listo { border-color: var(--ok); color: var(--ok); }

/* ── Glosario ───────────────────────────────────────────── */
.dic-cats { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e5) 0 var(--e4); }
.dic-cat {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  padding: 8px var(--e3);
  font-size: 13.5px; font-weight: 600;
  color: var(--tiza-2);
  min-height: 40px;
  transition: border-color .18s var(--sal), color .18s var(--sal);
}
.dic-cat i { width: 10px; height: 10px; background: var(--rc); border-radius: 1px; }
.dic-cat:hover { color: var(--tiza); border-color: var(--linea-viva); }
.dic-cat.on { border-color: var(--rc); color: var(--tiza); }

/* La regla es borde de celda, no fondo con separaciones: con el
   truco del fondo, los huecos de la última fila se pintaban sólidos. */
.dic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
            background: var(--noche-alta); border: 1px solid var(--linea);
            border-radius: var(--r2); overflow: hidden; }
.dic-grid > * { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.dic-term {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--e4) var(--e3);
  min-height: 78px;
  background: var(--noche-alta);
  text-align: left;
  transition: background-color .18s var(--sal);
}
.dic-term:hover { background: var(--noche-mas); }
.dic-w { font-size: 16px; font-weight: 700; }
.dic-c { display: flex; align-items: center; gap: 6px;
         font-family: 'Teko', sans-serif; font-size: 11px;
         letter-spacing: .04em; text-transform: uppercase; color: var(--tiza-3); }
.dic-c i { width: 8px; height: 8px; background: var(--rc); border-radius: 1px; }

/* Ficha del término: la palabra, de dónde viene, y qué
   solemos entender mal. */
.dic-ficha-w { font-size: clamp(27px, 5vw, 38px); font-weight: 800; font-stretch: 116%;
               line-height: 1; letter-spacing: -.025em; color: var(--rc); }
.dic-ficha-e { font-family: 'Teko', sans-serif; font-size: 12.5px;
               color: var(--rc); margin-top: var(--e2); }
.dic-ficha-rot { font-family: 'Teko', sans-serif; font-size: 11px;
                 letter-spacing: .07em; text-transform: uppercase; color: var(--tiza-3);
                 margin: var(--e4) 0 var(--e2); }
.dic-ficha p { font-size: 16px; line-height: 1.6; color: var(--tiza-2); }

/* Palabra clave tocable dentro del texto corrido: subrayado
   punteado, no un color plano que se confunda con un enlace. */
.kw {
  color: var(--tiza);
  border-bottom: 1px dashed var(--arena);
  cursor: pointer;
  background: none; padding: 0; font: inherit;
}
.kw:hover { color: var(--arena); }

/* ── Navegación inferior ────────────────────────────────── */
.tl-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding-inline: var(--e4);
  background: var(--noche);
  border-top: 1px solid var(--linea);
}
.tl-cuenta { font-family: 'Teko', sans-serif; font-size: 13px; color: var(--tiza); text-align: center; }
.tl-hint { font-size: 11.5px; color: var(--tiza-3); text-align: center; margin-top: 2px; }
@media (max-width: 560px) {
  .tl-nav .btn { padding-inline: var(--e3); }
  .tl-hint { display: none; }
}