/* ============================================================================
   styles.css — "Clase 3 · Datos y base de conocimiento" (base visual de las clases 1 y 2 + pantallas nuevas al final)
   Lienzo lógico 1920×1080 escalado al viewport. Todas las medidas se expresan
   como calc(N * var(--u)), donde N son píxeles sobre el lienzo 1080p y --u es
   la unidad de escala (min(100vw/1920, 100vh/1080)). En relaciones distintas
   a 16:9 el lienzo se centra con bandas negras (letterbox); nunca se deforma.
   ============================================================================ */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --u: min(100vw / 1920, 100vh / 1080);
  --fondo: #0B1220;
  --superficie: #121A2B;
  --superficie-2: #182236;
  --texto: #F3F6FB;
  --texto-2: #A9B4C7;
  --ambar: #F5B942;
  --cian: #38BDF8;
  --verde: #34D399;
  --rosa: #FB7185;
  --borde: rgba(169, 180, 199, 0.22);
  --borde-suave: rgba(169, 180, 199, 0.12);
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --margen: calc(96 * var(--u));
  --radio: calc(20 * var(--u));
  --t-pantalla: 260ms;
  --t-fragmento: 180ms;
  --t-panel: 200ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family: var(--fuente);
  color: var(--texto);
  font-size: calc(44 * var(--u));
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus { outline: none; }
:focus-visible,
.foco-visible {
  outline: calc(3 * var(--u)) solid var(--ambar);
  outline-offset: calc(3 * var(--u));
}

/* ---------------------------------------------------------------------------
   Lienzo 16:9
--------------------------------------------------------------------------- */
#stage {
  position: fixed;
  inset: 0;
  margin: auto;
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  background: var(--fondo);
  overflow: hidden;
  contain: layout paint;
}

#pantallas { position: absolute; inset: 0; }

/* ---------------------------------------------------------------------------
   Pantallas y transiciones
--------------------------------------------------------------------------- */
.pantalla {
  position: absolute;
  inset: 0;
  padding: var(--margen);
  display: flex;
  flex-direction: column;
  transition: opacity var(--t-pantalla) var(--ease), transform var(--t-pantalla) var(--ease);
  will-change: opacity, transform;
}
.pantalla.entrando { opacity: 0; transform: translateY(calc(16 * var(--u))); }
.pantalla.saliendo { opacity: 0; transform: translateY(calc(-16 * var(--u))); pointer-events: none; }

.frag {
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
  transition: opacity var(--t-fragmento) ease-out, transform var(--t-fragmento) ease-out;
}
.frag.visible { opacity: 1; transform: none; }
.sin-animacion .frag, .sin-animacion.frag { transition: none !important; }

/* ---------------------------------------------------------------------------
   Tipografía y jerarquía
--------------------------------------------------------------------------- */
.titulo {
  font-size: calc(88 * var(--u));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.subtitulo {
  font-size: calc(40 * var(--u));
  color: var(--texto-2);
  margin: calc(16 * var(--u)) 0 0;
  font-weight: 400;
}
.encabezado { flex: 0 0 auto; margin-bottom: calc(48 * var(--u)); }
.cuerpo { flex: 1 1 auto; min-height: 0; position: relative; }

.etiqueta {
  font-size: calc(28 * var(--u));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian);
}
.etiqueta.ambar { color: var(--ambar); }
.secundario { color: var(--texto-2); }
.ambar { color: var(--ambar); }
.cian { color: var(--cian); }
.verde { color: var(--verde); }
.rosa { color: var(--rosa); }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; }

.pie-pantalla {
  position: absolute;
  left: calc(360 * var(--u)); right: calc(620 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
  bottom: calc(46 * var(--u));
  text-align: center;
  font-size: calc(24 * var(--u));
  color: var(--texto-2);
  opacity: 0.55;
  pointer-events: none;
  white-space: nowrap;
}

/* Chips de valores por verificar (config.js) */
.chip-verificar {
  display: inline-block;
  padding: 0 calc(14 * var(--u));
  border: calc(2 * var(--u)) dashed var(--ambar);
  border-radius: calc(10 * var(--u));
  color: var(--ambar);
  font-weight: 600;
  line-height: 1.5;
  vertical-align: baseline;
}

/* Iconos lineales */
.icono {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  flex: 0 0 auto;
}

/* Tarjetas, botones, insignias */
.tarjeta {
  background: var(--superficie);
  border: calc(2 * var(--u)) solid var(--borde-suave);
  border-radius: var(--radio);
  padding: calc(40 * var(--u));
}
.tarjeta.ambar-borde { border-color: var(--ambar); border-width: calc(3 * var(--u)); }

.boton {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--superficie-2);
  border: calc(2 * var(--u)) solid var(--borde);
  color: var(--texto);
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.boton:hover { background: #1E2A42; }
.boton.primario { background: var(--ambar); border-color: var(--ambar); color: #1A1400; font-weight: 600; }
.boton.primario:hover { background: #FFC85A; }
.boton.peligro { border-color: var(--rosa); color: var(--rosa); }
.boton.peligro:hover { background: rgba(251, 113, 133, 0.12); }
.boton.pequeno { font-size: calc(28 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)); }
.boton .tecla { font-size: calc(24 * var(--u)); opacity: 0.6; font-weight: 500; }

.tecla-kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.35em;
  border-radius: 0.25em;
  border: calc(2 * var(--u)) solid var(--borde);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.85em;
  text-align: center;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.insignia {
  display: inline-block;
  padding: calc(6 * var(--u)) calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: calc(32 * var(--u));
  line-height: 1.4;
  border: calc(3 * var(--u)) solid currentColor;
}
.insignia.FALSO { color: var(--rosa); }
.insignia.VERDADERO { color: var(--verde); }
.insignia.DEPENDE, .insignia.DEBATE { color: var(--cian); }

/* Micro-animación de confirmación (5.6) */
@keyframes pulso { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pulso { animation: pulso 150ms ease-out; }

/* Puntos de nivel de IA */
.puntos-nivel { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.puntos-nivel i {
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--texto-2);
  display: inline-block;
}
.puntos-nivel i.lleno { background: var(--ambar); border-color: var(--ambar); }
.puntos-nivel .puntos-texto { font-size: calc(24 * var(--u)); color: var(--texto-2); margin-left: calc(4 * var(--u)); }

/* Chips de rol */
.chip-rol {
  display: inline-block;
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  border-radius: calc(999 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 600;
  letter-spacing: 0.04em;
  border: calc(2 * var(--u)) solid currentColor;
  line-height: 1.5;
  white-space: nowrap;
}
.chip-rol.analista { color: var(--cian); }
.chip-rol.supervisor { color: var(--ambar); }
.chip-rol.asesor { color: var(--verde); }
.chip-rol.gerente { color: var(--rosa); }
.chip-rol.apoyo { color: var(--texto-2); }

/* Campos de texto */
.campo {
  width: 100%;
  background: var(--fondo);
  border: calc(2 * var(--u)) solid var(--borde);
  border-radius: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  color: var(--texto);
  resize: none;
}
.campo::placeholder { color: var(--texto-2); opacity: 0.6; }
.campo:focus { border-color: var(--ambar); }

/* Listas desplazables internas (única excepción al "sin scroll") */
.desplazable {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 180, 199, 0.35) transparent;
}
.desplazable::-webkit-scrollbar { width: calc(8 * var(--u)); }
.desplazable::-webkit-scrollbar-thumb { background: rgba(169, 180, 199, 0.35); border-radius: calc(4 * var(--u)); }

/* Confirmación inline */
.confirmar-inline {
  color: var(--rosa);
  font-weight: 600;
  font-size: calc(28 * var(--u));
}

/* ---------------------------------------------------------------------------
   Chrome persistente (3.3)
--------------------------------------------------------------------------- */
#chrome { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#progreso {
  position: absolute;
  left: 0; bottom: 0;
  height: calc(4 * var(--u));
  width: 0;
  background: var(--ambar);
  transition: width var(--t-pantalla) var(--ease);
}
#reloj, #indicador {
  position: absolute;
  bottom: calc(42 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  color: var(--texto);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}
#reloj { left: var(--margen); }
#indicador { right: var(--margen); }
#chip-cronometro {
  display: none;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  border-radius: calc(999 * var(--u));
  border: calc(2 * var(--u)) solid var(--ambar);
  color: var(--ambar);
  font-weight: 600;
}
#chip-cronometro.activo { display: inline-flex; }
#reloj.con-chip { opacity: 0.85; }
#reloj.con-chip #hora { opacity: 0.6; }

/* ---------------------------------------------------------------------------
   Pantalla en negro (B)
--------------------------------------------------------------------------- */
#negro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
body.negro #negro { opacity: 1; pointer-events: auto; }
body.negro #chrome { display: none; }

/* ---------------------------------------------------------------------------
   Overlays y paneles
--------------------------------------------------------------------------- */
#overlays { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#overlays > * { pointer-events: auto; }

.velo {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.6);
  opacity: 0;
  transition: opacity var(--t-panel) ease-out;
}
.velo.visible { opacity: 1; }

.panel {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  padding: calc(56 * var(--u)) calc(48 * var(--u));
  box-shadow: 0 0 calc(80 * var(--u)) rgba(0, 0, 0, 0.55);
  transition: transform var(--t-panel) var(--ease);
}
.panel.izquierda { left: 0; width: calc(560 * var(--u)); transform: translateX(-100%); border-right: calc(2 * var(--u)) solid var(--borde-suave); }
.panel.derecha { right: 0; transform: translateX(100%); border-left: calc(2 * var(--u)) solid var(--borde-suave); }
.panel.visible { transform: none; }
.panel-titulo { font-size: calc(40 * var(--u)); font-weight: 700; margin: 0 0 calc(24 * var(--u)); }
.panel-ayuda { font-size: calc(22 * var(--u)); color: var(--texto-2); opacity: 0.8; margin-top: calc(20 * var(--u)); line-height: 1.4; }

.modal {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: calc(1040 * var(--u));
  max-height: calc(960 * var(--u));
  background: var(--superficie);
  border: calc(2 * var(--u)) solid var(--borde-suave);
  border-radius: calc(28 * var(--u));
  padding: calc(56 * var(--u)) calc(64 * var(--u));
  box-shadow: 0 calc(30 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--t-panel) ease-out, transform var(--t-panel) var(--ease);
  display: flex;
  flex-direction: column;
}
.modal.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal.ancho { width: calc(1560 * var(--u)); }
.modal .columnas { overflow: hidden; }

/* Menú lateral (5.4) */
#menu .filtro { margin-bottom: calc(20 * var(--u)); }
#menu .aviso-verificar {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  color: var(--ambar);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  margin-bottom: calc(20 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: calc(2 * var(--u)) dashed var(--ambar);
  border-radius: calc(12 * var(--u));
}
#menu .lista { flex: 1 1 auto; min-height: 0; margin: 0 calc(-16 * var(--u)); padding: 0 calc(16 * var(--u)); }
#menu .grupo-titulo {
  font-size: calc(20 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
  opacity: 0.8;
  margin: calc(22 * var(--u)) 0 calc(8 * var(--u));
  font-variant-numeric: tabular-nums;
}
#menu .fila {
  display: grid;
  grid-template-columns: calc(64 * var(--u)) 1fr auto;
  gap: calc(14 * var(--u));
  align-items: center;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.3;
  cursor: pointer;
  border-left: calc(4 * var(--u)) solid transparent;
}
#menu .fila .id { color: var(--texto-2); font-variant-numeric: tabular-nums; font-weight: 600; }
#menu .fila .estado { font-size: calc(20 * var(--u)); color: var(--ambar); font-variant-numeric: tabular-nums; }
#menu .fila.actual { border-left-color: var(--cian); }
#menu .fila.enfocada { background: rgba(245, 185, 66, 0.14); border-left-color: var(--ambar); }
#menu .fila:hover { background: rgba(255, 255, 255, 0.05); }
#menu .sin-resultados { color: var(--texto-2); font-size: calc(26 * var(--u)); padding: calc(20 * var(--u)); }

/* Overlay de atajos (?) */
#ayuda .columnas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(48 * var(--u)); }
#ayuda h3 { font-size: calc(22 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cian); margin: 0 0 calc(16 * var(--u)); }
#ayuda .atajo { display: grid; grid-template-columns: calc(280 * var(--u)) 1fr; gap: calc(16 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.3; padding: calc(5 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid var(--borde-suave); }
#ayuda .atajo b { color: var(--ambar); font-weight: 600; font-variant-numeric: tabular-nums; }
#ayuda .atajo span { color: var(--texto-2); }

/* Panel de exportación (E) */
#exportar .resumen { font-size: calc(26 * var(--u)); color: var(--texto-2); margin: calc(-8 * var(--u)) 0 calc(28 * var(--u)); font-variant-numeric: tabular-nums; }
#exportar .accion {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) 1fr;
  gap: calc(18 * var(--u));
  align-items: center;
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-radius: calc(14 * var(--u));
  cursor: pointer;
  border-left: calc(4 * var(--u)) solid transparent;
}
#exportar .accion .texto { font-size: calc(32 * var(--u)); font-weight: 500; }
#exportar .accion .detalle { font-size: calc(22 * var(--u)); color: var(--texto-2); }
#exportar .accion.enfocada { background: rgba(245, 185, 66, 0.14); border-left-color: var(--ambar); }
#exportar .accion:hover { background: rgba(255, 255, 255, 0.05); }
#exportar .accion.peligro .texto { color: var(--rosa); }
#exportar .mensaje { min-height: calc(44 * var(--u)); margin-top: calc(24 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.35; }
#exportar .mensaje.error { color: var(--rosa); }
#exportar .mensaje.ok { color: var(--verde); }
#exportar .mensaje.confirmar { color: var(--ambar); font-weight: 600; }
#exportar .campo-borrar { margin-top: calc(12 * var(--u)); width: calc(420 * var(--u)); font-size: calc(28 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
#exportar .mensaje { flex-shrink: 0; }

/* Toast */
#toast {
  position: absolute;
  left: 50%;
  bottom: calc(110 * var(--u));
  transform: translateX(-50%) translateY(calc(12 * var(--u)));
  background: var(--superficie-2);
  border: calc(2 * var(--u)) solid var(--borde);
  border-radius: calc(14 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  font-size: calc(28 * var(--u));
  color: var(--texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  z-index: 40;
  max-width: calc(1400 * var(--u));
  text-align: center;
}
#toast.visible { opacity: 1; transform: translateX(-50%); }

/* ---------------------------------------------------------------------------
   Movimiento reducido
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===========================================================================
   Pantallas
   =========================================================================== */

/* --- S01 Portada --- */
.p-portada { justify-content: center; align-items: center; text-align: center; background: radial-gradient(ellipse at center, #17223B 0%, var(--fondo) 62%); }
.s01-centro { max-width: calc(1520 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.s01-sobretitulo { font-size: calc(32 * var(--u)); color: var(--cian); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-bottom: calc(44 * var(--u)); }
.s01-titulo { font-size: calc(104 * var(--u)); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 calc(44 * var(--u)); }
.s01-subtitulo { font-size: calc(56 * var(--u)); color: var(--ambar); font-weight: 600; margin-bottom: calc(64 * var(--u)); }
.s01-autor { font-size: calc(40 * var(--u)); font-weight: 500; }
.s01-cargo { font-size: calc(32 * var(--u)); color: var(--texto-2); margin-top: calc(10 * var(--u)); }
.s01-pie { position: absolute; right: var(--margen); bottom: calc(84 * var(--u)); font-size: calc(24 * var(--u)); opacity: 0.4; }
.s01-logo { position: absolute; left: var(--margen); top: var(--margen); font-size: calc(28 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--texto-2); opacity: 0.7; font-weight: 600; }

/* --- S02 Agenda --- */
.p-agenda .encabezado { margin-bottom: calc(24 * var(--u)); }
.p-agenda .subtitulo { margin-top: calc(12 * var(--u)); }
.s02-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; column-gap: calc(72 * var(--u)); row-gap: calc(8 * var(--u)); }
.s02-fila { display: flex; gap: calc(28 * var(--u)); padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(24 * var(--u)); border-left: calc(6 * var(--u)) solid transparent; align-items: flex-start; border-radius: 0 calc(12 * var(--u)) calc(12 * var(--u)) 0; }
.s02-fila.actual { border-left-color: var(--ambar); background: linear-gradient(90deg, rgba(245, 185, 66, 0.1), transparent 70%); }
.s02-fila.pasado { opacity: 0.55; }
.s02-hora { flex: 0 0 calc(200 * var(--u)); font-size: calc(32 * var(--u)); color: var(--texto-2); line-height: 1.3; padding-top: calc(4 * var(--u)); }
.s02-abs { opacity: 0.7; }
.s02-nombre { font-size: calc(38 * var(--u)); font-weight: 600; line-height: 1.15; }
.s02-desc { font-size: calc(32 * var(--u)); color: var(--texto-2); line-height: 1.15; margin-top: calc(4 * var(--u)); }
.s02-fila.actual .s02-desc, .s02-fila.actual .s02-hora { color: var(--texto); }

/* --- S03 Quién soy --- */
.s03-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(72 * var(--u)); align-items: center; }
.s03-linea { font-size: calc(42 * var(--u)); line-height: 1.3; margin: 0 0 calc(28 * var(--u)); }
.s03-linea:last-child { margin-bottom: 0; }
.s03-promesa { padding: calc(48 * var(--u)); }
.s03-promesa .etiqueta { margin-bottom: calc(24 * var(--u)); }
.s03-promesa p { font-size: calc(38 * var(--u)); line-height: 1.3; margin: 0; }

/* --- S04 Roster --- */
.p-roster .encabezado { margin-bottom: calc(20 * var(--u)); }
.s04-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); min-height: 0; }
.tj { position: relative; border: calc(3 * var(--u)) dashed var(--borde); border-radius: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); overflow: hidden; cursor: pointer; min-height: 0; transition: border-color 120ms, background 120ms; }
.tj.parcial { border-color: rgba(245, 185, 66, 0.55); background: var(--superficie); }
.tj.completa { border-style: solid; border-color: var(--borde-suave); background: var(--superficie); }
.tj.seleccionada { border-style: solid; border-color: var(--ambar); }
.tj-num { font-size: calc(96 * var(--u)); font-weight: 700; color: var(--texto-2); opacity: 0.3; margin: auto; line-height: 1; }
.tj-idx { position: absolute; top: calc(10 * var(--u)); right: calc(14 * var(--u)); font-size: calc(22 * var(--u)); color: var(--texto-2); opacity: 0.5; }
.tj-nombre { font-size: calc(36 * var(--u)); font-weight: 600; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: calc(36 * var(--u)); }
.tj-fila { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.tj-fila .puntos-nivel .puntos-texto { display: none; }
.tj-tarea { font-size: calc(28 * var(--u)); color: var(--texto-2); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip-rol.pendiente { opacity: 0.35; }
.s04-pie { display: flex; justify-content: space-between; font-size: calc(24 * var(--u)); color: var(--texto-2); opacity: 0.75; margin-top: calc(14 * var(--u)); }
.s04-velo { position: absolute; inset: 0; background: rgba(11, 18, 32, 0.45); opacity: 0; pointer-events: none; transition: opacity var(--t-panel); z-index: 4; }
.s04-velo.visible { opacity: 1; pointer-events: auto; }
.s04-panel { position: absolute; top: 0; right: 0; bottom: 0; width: calc(640 * var(--u)); background: var(--superficie); padding: calc(40 * var(--u)) calc(44 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); transform: translateX(100%); transition: transform var(--t-panel) var(--ease); box-shadow: 0 0 calc(80 * var(--u)) rgba(0, 0, 0, 0.55); border-left: calc(2 * var(--u)) solid var(--borde-suave); z-index: 5; overflow: hidden; }
.s04-panel.visible { transform: none; }
.s04-panel > * { flex-shrink: 0; }
.s04-label { font-size: calc(22 * var(--u)); color: var(--texto-2); margin-top: calc(14 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.selector { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)); border-radius: calc(12 * var(--u)); padding: calc(4 * var(--u)); border: calc(2 * var(--u)) solid transparent; }
.selector:focus { border-color: var(--ambar); }
.selector.horizontal { grid-template-columns: 1fr 1fr 1fr; }
.opcion { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(26 * var(--u)); color: var(--texto-2); border: calc(2 * var(--u)) solid var(--borde-suave); text-align: left; line-height: 1.2; }
.opcion .tecla-kbd { font-size: calc(20 * var(--u)); }
.opcion.elegida { background: rgba(245, 185, 66, 0.16); color: var(--texto); border-color: var(--ambar); }
.s04-error { font-size: calc(24 * var(--u)); min-height: calc(30 * var(--u)); margin-top: calc(6 * var(--u)); }
.s04-botones { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); align-items: center; }
.s04-botones .boton { font-size: calc(26 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); }
.s04-botones .primario { width: 100%; justify-content: center; }
.s04-vaciar-zona { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; margin-top: calc(4 * var(--u)); }
.s04-vaciar-zona .confirmar-inline { font-size: calc(24 * var(--u)); }
.s04-panel .campo { font-size: calc(30 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); }

/* --- S05 Mapa del grupo --- */
.s05-cols { display: grid; grid-template-columns: 1fr 1fr 1.3fr; grid-template-rows: minmax(0, 1fr); gap: calc(64 * var(--u)); min-height: 0; }
.s05-col { display: flex; flex-direction: column; min-height: 0; }
.s05-col > .etiqueta { margin-bottom: calc(24 * var(--u)); }
.barras { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.barra-etq { font-size: calc(32 * var(--u)); color: var(--texto-2); margin-bottom: calc(6 * var(--u)); }
.barra-linea { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.barra-svg { flex: 1; height: calc(26 * var(--u)); display: block; }
.barra-fondo { fill: rgba(169, 180, 199, 0.12); }
.barra-valor.cian { fill: var(--cian); }
.barra-valor.ambar { fill: var(--ambar); }
.barra-num { font-size: calc(40 * var(--u)); font-weight: 600; min-width: calc(60 * var(--u)); text-align: right; line-height: 1; }
.s05-lectura { font-size: calc(36 * var(--u)); margin: calc(44 * var(--u)) 0 0; line-height: 1.3; }
.s05-lista { flex: 1; min-height: 0; margin-right: calc(-16 * var(--u)); padding-right: calc(16 * var(--u)); }
.s05-item { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); border-left: calc(5 * var(--u)) solid transparent; cursor: pointer; }
.s05-item.enfocado { background: rgba(255, 255, 255, 0.05); border-left-color: var(--cian); }
.s05-item.marcada { border-left-color: var(--ambar); background: rgba(245, 185, 66, 0.1); }
.s05-item-texto { flex: 1; min-width: 0; }
.s05-nombre { font-size: calc(28 * var(--u)); color: var(--texto-2); }
.s05-tarea { font-size: calc(36 * var(--u)); line-height: 1.2; }
.s05-estrella { font-size: calc(36 * var(--u)); color: var(--texto-2); opacity: 0.35; display: inline-flex; padding: calc(6 * var(--u)); }
.s05-item.marcada .s05-estrella { color: var(--ambar); opacity: 1; }
.s05-item.marcada .s05-estrella .icono { fill: var(--ambar); }
.s05-sin { font-size: calc(36 * var(--u)); margin: 0; }
.s05-pie { font-size: calc(24 * var(--u)); color: var(--texto-2); opacity: 0.75; margin-top: calc(14 * var(--u)); }

/* --- S06 Mitos · intro --- */
.p-mitosIntro { justify-content: center; align-items: center; text-align: center; }
.s06-titulo { font-size: calc(112 * var(--u)); }
.s06-subtitulo { font-size: calc(48 * var(--u)); color: var(--texto-2); margin: calc(32 * var(--u)) 0 0; }
.s06-instr { font-size: calc(44 * var(--u)); max-width: calc(1300 * var(--u)); margin: calc(80 * var(--u)) 0 0; line-height: 1.35; color: var(--ambar); }

/* --- S07–S12 Mitos --- */
.mito { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: calc(44 * var(--u)); }
.mito-afirmacion { font-size: calc(72 * var(--u)); font-weight: 600; line-height: 1.15; margin: 0; max-width: calc(1560 * var(--u)); letter-spacing: -0.01em; }
.mito-votos { display: flex; gap: calc(180 * var(--u)); transition: gap 300ms var(--ease); }
.mito-contador { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.mito-etq { font-size: calc(32 * var(--u)); color: var(--texto-2); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.mito-num { font-size: calc(120 * var(--u)); font-weight: 700; line-height: 1; transition: font-size 300ms var(--ease); }
.verdadero .mito-num { color: var(--ambar); }
.falso .mito-num { color: var(--texto-2); }
.mito-botones { display: flex; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); }
.mito-botones .boton { min-width: calc(72 * var(--u)); justify-content: center; font-size: calc(36 * var(--u)); padding: calc(2 * var(--u)) calc(20 * var(--u)); }
.mito-veredicto { display: none; flex-direction: column; align-items: center; gap: calc(24 * var(--u)); opacity: 0; transform: translateY(calc(16 * var(--u))); }
.mito.revelado .mito-veredicto { display: flex; animation: aparecer 300ms var(--ease) forwards; }
@keyframes aparecer { to { opacity: 1; transform: none; } }
.mito.revelado .mito-votos { gap: calc(100 * var(--u)); }
.mito.revelado .mito-num { font-size: calc(72 * var(--u)); }
.mito.revelado .mito-botones { display: none; }
.insignia.grande { font-size: calc(48 * var(--u)); padding: calc(8 * var(--u)) calc(36 * var(--u)); }
.mito-explicacion { font-size: calc(44 * var(--u)); max-width: calc(1400 * var(--u)); line-height: 1.3; margin: 0; }
.mito-creian { font-size: calc(32 * var(--u)); margin: 0; }

/* --- S13 Resultado mitos --- */
.s13-tabla { display: flex; flex-direction: column; justify-content: center; gap: calc(10 * var(--u)); }
.s13-fila { display: grid; grid-template-columns: calc(56 * var(--u)) calc(640 * var(--u)) 1fr calc(96 * var(--u)) calc(280 * var(--u)); gap: calc(28 * var(--u)); align-items: center; padding: calc(12 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid var(--borde-suave); }
.s13-n { font-size: calc(32 * var(--u)); color: var(--texto-2); }
.s13-af { font-size: calc(36 * var(--u)); line-height: 1.2; }
.s13-barra { height: calc(28 * var(--u)); width: 100%; display: block; }
.s13-fondo { fill: rgba(169, 180, 199, 0.12); }
.s13-valor { fill: var(--cian); }
.s13-votos { font-size: calc(40 * var(--u)); font-weight: 600; text-align: right; }
.s13-fila .insignia { justify-self: end; }
.s13-cierre { font-size: calc(40 * var(--u)); line-height: 1.3; margin: calc(36 * var(--u)) 0 0; }

/* --- S19 Cómo funciona --- */
.s19-lista { display: flex; flex-direction: column; gap: calc(24 * var(--u)); justify-content: center; }
.s19-item { display: flex; align-items: center; gap: calc(40 * var(--u)); padding: calc(20 * var(--u)) calc(32 * var(--u)); border-radius: calc(16 * var(--u)); }
.s19-icono { width: calc(64 * var(--u)); height: calc(64 * var(--u)); color: var(--cian); }
.s19-item p { margin: 0; font-size: calc(48 * var(--u)); line-height: 1.25; }
.s19-item.alerta { background: rgba(251, 113, 133, 0.12); }
.s19-item.alerta .s19-icono, .s19-item.alerta p { color: var(--rosa); }
.s19-cierre { font-size: calc(40 * var(--u)); margin: calc(20 * var(--u)) 0 0 calc(32 * var(--u)); }

/* --- S20 Las 4 reglas --- */
.s20-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); align-content: center; }
.s20-tarjeta { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(40 * var(--u)) calc(32 * var(--u)); }
.s20-num { font-size: calc(96 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; }
.s20-regla { font-size: calc(48 * var(--u)); font-weight: 600; line-height: 1.15; }
.s20-apoyo { font-size: calc(32 * var(--u)); line-height: 1.3; }

/* --- S21 Descanso --- */
.p-descanso { justify-content: center; align-items: center; text-align: center; }
.s21-centro { display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u)); }
.s21-num { font-size: calc(320 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.s21-num.terminado { color: var(--ambar); }
.s21-num.parpadea { animation: parpadeo 1s ease-in-out infinite; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.s21-regresamos { font-size: calc(48 * var(--u)); min-height: calc(60 * var(--u)); }
.s21-mensaje { font-size: calc(40 * var(--u)); }
.s21-botones { display: flex; gap: calc(12 * var(--u)); margin-top: calc(36 * var(--u)); }
.s21-botones .boton:disabled { opacity: 0.35; cursor: default; }

/* --- S22 Google AI Pro · qué es --- */
.p-aiproQueEs .encabezado { margin-bottom: calc(36 * var(--u)); }
.s22-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(80 * var(--u)); align-items: start; }
.s22-def { font-size: calc(36 * var(--u)); line-height: 1.3; margin: 0 0 calc(28 * var(--u)); }
.s22-lista { margin: calc(14 * var(--u)) 0 0; padding-left: calc(40 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.25; }
.s22-lista .chip-verificar { line-height: 1.3; }
.s22-lista li { margin-bottom: calc(8 * var(--u)); }
.s22-precio { padding: calc(48 * var(--u)); }
.s22-valor { font-size: calc(56 * var(--u)); font-weight: 700; margin: calc(24 * var(--u)) 0 calc(16 * var(--u)); line-height: 1.25; }
.s22-cond { font-size: calc(32 * var(--u)); line-height: 1.3; }

/* --- S23 Por qué --- */
.s23-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(48 * var(--u)) calc(80 * var(--u)); align-content: center; }
.s23-razon { display: flex; gap: calc(28 * var(--u)); align-items: flex-start; }
.s23-num { font-size: calc(56 * var(--u)); color: var(--ambar); font-weight: 700; line-height: 1; min-width: calc(60 * var(--u)); }
.s23-titulo { font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.2; margin-bottom: calc(10 * var(--u)); }
.s23-apoyo { font-size: calc(32 * var(--u)); line-height: 1.3; }

/* --- QR (S24, S25) --- */
.qr-caja { background: #fff; border-radius: calc(16 * var(--u)); display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; }
.qr-560 { width: calc(640 * var(--u)); height: calc(640 * var(--u)); padding: calc(40 * var(--u)); }
.qr-700 { width: calc(780 * var(--u)); height: calc(780 * var(--u)); padding: calc(40 * var(--u)); }
.qr-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-falta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); color: #4B5563; font-size: calc(32 * var(--u)); text-align: center; padding: calc(40 * var(--u)); }
.qr-falta .icono { width: calc(120 * var(--u)); height: calc(120 * var(--u)); }

/* --- S24 Activación --- */
.s24-cols { flex: 1; display: grid; grid-template-columns: 55fr 45fr; gap: calc(64 * var(--u)); min-height: 0; }
.s24-izq { display: flex; flex-direction: column; min-height: 0; }
.s24-izq .encabezado { margin-bottom: calc(32 * var(--u)); }
.s24-pasos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(12 * var(--u)); font-size: calc(36 * var(--u)); line-height: 1.3; flex: 1; }
.s24-ayuda { font-size: calc(32 * var(--u)); margin: calc(16 * var(--u)) 0 0; }
.s24-der { display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--u)); }
.s24-contador { display: flex; align-items: center; justify-content: center; gap: calc(28 * var(--u)); width: 100%; }
.s24-contador-etq { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.s24-todas { font-size: calc(32 * var(--u)); font-weight: 600; visibility: hidden; }
.s24-contador.completo .s24-todas { visibility: visible; }
.s24-botones { display: flex; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
.s24-botones .boton { min-width: calc(64 * var(--u)); justify-content: center; padding: calc(2 * var(--u)) calc(16 * var(--u)); font-size: calc(32 * var(--u)); }
.s24-anillo { position: relative; width: calc(200 * var(--u)); height: calc(200 * var(--u)); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.s24-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-fondo { fill: none; stroke: rgba(169, 180, 199, 0.15); stroke-width: 6; }
.anillo-valor { fill: none; stroke: var(--ambar); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 300ms var(--ease); }
.s24-contador.completo .anillo-valor { stroke: var(--verde); }
.s24-num { font-size: calc(120 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; position: relative; }
.s24-contador.completo .s24-num { color: var(--verde); }
.s24-de { font-size: calc(56 * var(--u)); color: var(--texto-2); }

/* --- S25 WhatsApp --- */
.s25-cols { flex: 1; display: grid; grid-template-columns: calc(780 * var(--u)) 1fr; gap: calc(72 * var(--u)); align-items: center; min-height: 0; }
.s25-grupo { display: flex; align-items: center; gap: calc(20 * var(--u)); font-size: calc(48 * var(--u)); font-weight: 600; margin-bottom: calc(40 * var(--u)); line-height: 1.2; }
.s25-usos { margin: calc(16 * var(--u)) 0 calc(40 * var(--u)); padding-left: calc(40 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.3; }
.s25-usos li { margin-bottom: calc(14 * var(--u)); }
.s25-regla { display: flex; align-items: center; gap: calc(20 * var(--u)); font-size: calc(36 * var(--u)); color: var(--rosa); background: rgba(251, 113, 133, 0.12); padding: calc(20 * var(--u)) calc(28 * var(--u)); border-radius: calc(14 * var(--u)); line-height: 1.3; }
.s25-regla .icono { font-size: calc(44 * var(--u)); }

/* --- S26 Clases 2 a 4 --- */
.s26-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); align-content: start; }
.s26-tarjeta { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(40 * var(--u)); }
.s26-titulo { font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.15; margin-bottom: calc(10 * var(--u)); }
.s26-linea { font-size: calc(32 * var(--u)); line-height: 1.3; margin: 0; }
.s26-salen { font-size: calc(32 * var(--u)); line-height: 1.3; margin: calc(12 * var(--u)) 0 0; }

/* --- S28 Parejas --- */
.s28-cols { display: grid; grid-template-columns: 38fr 62fr; grid-template-rows: minmax(0, 1fr); gap: calc(56 * var(--u)); min-height: 0; }
.s28-linea { font-size: calc(42 * var(--u)); line-height: 1.3; margin: 0 0 calc(36 * var(--u)); }
.s28-panel { display: flex; flex-direction: column; min-height: 0; padding: calc(28 * var(--u)) calc(32 * var(--u)); }
.s28-panel-enc { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(20 * var(--u)); gap: calc(24 * var(--u)); }
.s28-parejas { font-size: calc(32 * var(--u)); }
.s28-grupos { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.s28-grupo { display: grid; grid-template-columns: calc(236 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: start; }
.s28-grupo-titulo { font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1.2; padding-top: calc(6 * var(--u)); }
.s28-nombres { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(8 * var(--u)); }
.s28-nombre { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(28 * var(--u)); padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); background: rgba(255, 255, 255, 0.05); border: calc(1 * var(--u)) solid var(--borde-suave); line-height: 1.3; }
.s28-nombre .puntos-nivel i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }

/* --- S29 Tarea puente --- */
.s29-cuerpo { display: flex; flex-direction: column; gap: calc(40 * var(--u)); justify-content: center; }
.s29-fila { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); }
.s29-tarjeta { display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(48 * var(--u)); }
.s29-num { font-size: calc(96 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; }
.s29-titulo { font-size: calc(48 * var(--u)); font-weight: 600; line-height: 1.2; }
.s29-apoyo { font-size: calc(32 * var(--u)); line-height: 1.3; }
.s29-recordatorio { font-size: calc(32 * var(--u)); margin: 0; }

/* --- S30 Parqueadero y overlay P --- */
.pq { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pq-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.pq-vacio { font-size: calc(40 * var(--u)); color: var(--texto-2); }
.pq-item { display: grid; grid-template-columns: calc(56 * var(--u)) 1fr auto auto auto; gap: calc(20 * var(--u)); align-items: center; padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); border-left: calc(5 * var(--u)) solid transparent; font-size: calc(40 * var(--u)); line-height: 1.25; }
.pq-item.enfocado { background: rgba(255, 255, 255, 0.05); border-left-color: var(--ambar); }
.pq-item.resuelta .pq-texto { text-decoration: line-through; opacity: 0.5; }
.pq-n { color: var(--texto-2); font-size: calc(32 * var(--u)); }
.pq-hora { font-size: calc(24 * var(--u)); color: var(--texto-2); opacity: 0.7; }
.pq-acciones { display: flex; gap: calc(6 * var(--u)); opacity: 0.3; }
.pq-item.enfocado .pq-acciones, .pq-item:hover .pq-acciones { opacity: 1; }
.pq-btn { width: calc(44 * var(--u)); height: calc(44 * var(--u)); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(8 * var(--u)); color: var(--texto-2); font-size: calc(28 * var(--u)); }
.pq-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--texto); }
.pq-editar { font-size: calc(36 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); }
.pq-entrada { margin-top: calc(16 * var(--u)); }
.pq-entrada .campo { font-size: calc(36 * var(--u)); }
.panel-parqueadero { width: calc(720 * var(--u)); }
.panel-parqueadero .pq-cont { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-parqueadero .pq-item { font-size: calc(32 * var(--u)); grid-template-columns: calc(44 * var(--u)) 1fr auto auto auto; padding: calc(10 * var(--u)) calc(12 * var(--u)); gap: calc(12 * var(--u)); }
.panel-parqueadero .pq-n { font-size: calc(26 * var(--u)); }
.panel-parqueadero .pq-vacio { font-size: calc(32 * var(--u)); }
.panel-parqueadero .pq-entrada .campo, .panel-parqueadero .pq-editar { font-size: calc(30 * var(--u)); }
.panel-parqueadero .confirmar-inline { font-size: calc(24 * var(--u)); }

/* --- S31 Resumen --- */
.s31-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(28 * var(--u)); min-height: 0; }
.s31-tarjeta { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(36 * var(--u)) calc(40 * var(--u)); justify-content: center; min-height: 0; }
.s31-titulo { font-size: calc(32 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--cian); }
.s31-dato { font-size: calc(48 * var(--u)); font-weight: 700; line-height: 1.15; }
.s31-texto { font-size: calc(32 * var(--u)); line-height: 1.3; }

/* --- S32 Ticket de salida --- */
.s32-cols { flex: 1; display: grid; grid-template-columns: 3fr 2fr; gap: calc(80 * var(--u)); align-items: center; min-height: 0; }
.s32-preguntas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(28 * var(--u)); font-size: calc(48 * var(--u)); line-height: 1.25; }
.s32-tarjeta { padding: calc(48 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.s32-fecha, .s32-hora { font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.25; }
.s32-traigan { font-size: calc(32 * var(--u)); margin-top: calc(12 * var(--u)); }
.s32-gracias { position: absolute; inset: 0; background: var(--fondo); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(24 * var(--u)); z-index: 3; transition: opacity 700ms ease-out; transform: none !important; pointer-events: none; }
.s32-gracias.visible { pointer-events: auto; }
.s32-gracias-texto { font-size: calc(140 * var(--u)); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.s32-firma { font-size: calc(32 * var(--u)); }

/* ===========================================================================
   Pantallas nuevas (diagnóstico, bloque 4, activación por enlace)
   =========================================================================== */

/* --- Diagnóstico · captura --- */
.p-diagnostico .encabezado { margin-bottom: calc(20 * var(--u)); }
.p-diagnostico .titulo { font-size: calc(80 * var(--u)); }
.p-diagnostico .subtitulo { font-size: calc(34 * var(--u)); margin-top: calc(10 * var(--u)); }
.dg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(56 * var(--u)); min-height: 0; align-content: start; }
.dg-col { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.dg-cab, .dg-fila { display: grid; grid-template-columns: 1fr calc(96 * var(--u)) calc(96 * var(--u)) calc(96 * var(--u)); gap: calc(12 * var(--u)); align-items: center; }
.dg-cab { font-size: calc(22 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cian); font-weight: 600; padding: 0 calc(12 * var(--u)) calc(6 * var(--u)); }
.dg-cab span:nth-child(2), .dg-cab span:nth-child(3) { text-align: center; }
.dg-fila { padding: calc(3 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); border-left: calc(4 * var(--u)) solid transparent; min-height: calc(50 * var(--u)); }
.dg-fila.enfocada { background: rgba(255, 255, 255, 0.05); border-left-color: var(--ambar); }
.dg-nombre { font-size: calc(30 * var(--u)); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-celda { font-size: calc(34 * var(--u)); font-weight: 600; text-align: center; padding: 0; line-height: 1.25; border-radius: calc(8 * var(--u)); border: calc(2 * var(--u)) solid transparent; cursor: pointer; color: var(--texto-2); }
.dg-celda[data-col="0"] { color: var(--cian); }
.dg-celda[data-col="1"] { color: var(--ambar); }
.dg-celda.activa { border-color: var(--ambar); background: rgba(245, 185, 66, 0.12); color: var(--texto); }
.dg-botones { display: flex; gap: calc(4 * var(--u)); justify-content: flex-end; visibility: hidden; }
.dg-fila.enfocada .dg-botones, .dg-fila:hover .dg-botones { visibility: visible; }
.dg-btn { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(8 * var(--u)); border: calc(2 * var(--u)) solid var(--borde); color: var(--texto); font-size: calc(26 * var(--u)); display: inline-flex; align-items: center; justify-content: center; }
.dg-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* --- Diagnóstico · resultado --- */
.p-diagnosticoResultado .encabezado { margin-bottom: calc(16 * var(--u)); }
.p-diagnosticoResultado .titulo { font-size: calc(80 * var(--u)); }
.p-diagnosticoResultado .subtitulo { font-size: calc(32 * var(--u)); margin-top: calc(8 * var(--u)); }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(72 * var(--u)); min-height: 0; align-content: start; }
.dr-col { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.dr-fila { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.dr-nombre { font-size: calc(28 * var(--u)); color: var(--texto-2); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-barras { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.dr-svg { flex: 1; height: calc(16 * var(--u)); display: block; }
.dr-conocen { fill: rgba(245, 185, 66, 0.55); }
.dr-usan { fill: var(--cian); }
.dr-num { font-size: calc(26 * var(--u)); min-width: calc(100 * var(--u)); text-align: right; line-height: 1; }
.dr-lectura { font-size: calc(32 * var(--u)); margin: calc(14 * var(--u)) 0 0; line-height: 1.3; }

/* --- Dónde se va la semana --- */
.tp-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: calc(88 * var(--u)); align-items: start; min-height: 0; }
.tp-izq .barras { gap: calc(16 * var(--u)); }
.tp-fuente { font-size: calc(24 * var(--u)); margin: calc(14 * var(--u)) 0 0; line-height: 1.3; opacity: 0.85; }
.tp-der { display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
.tp-cifra { display: flex; gap: calc(28 * var(--u)); align-items: flex-start; }
.tp-num { font-size: calc(66 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; min-width: calc(300 * var(--u)); letter-spacing: -0.02em; white-space: nowrap; }
.tp-texto { font-size: calc(34 * var(--u)); line-height: 1.25; }
.tp-cifra .tp-fuente { margin-top: calc(6 * var(--u)); }
.tp-cierre { font-size: calc(40 * var(--u)); line-height: 1.3; margin: calc(28 * var(--u)) 0 0; }

/* --- El ciclo de suministros --- */
.p-ciclo .encabezado { margin-bottom: calc(28 * var(--u)); }
.p-ciclo .titulo { font-size: calc(80 * var(--u)); }
.p-ciclo .subtitulo { font-size: calc(36 * var(--u)); }
.ci-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: calc(20 * var(--u)); min-height: 0; }
.ci-tarjeta { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)); min-height: 0; }
.ci-num { font-size: calc(40 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; }
.ci-nombre { font-size: calc(36 * var(--u)); font-weight: 600; line-height: 1.15; }
.ci-ia { font-size: calc(30 * var(--u)); line-height: 1.3; }

/* --- Seis casos de uso --- */
.p-casos .encabezado { margin-bottom: calc(24 * var(--u)); }
.cs-cuerpo { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-height: 0; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20 * var(--u)); }
.cs-tarjeta { display: flex; gap: calc(18 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)); align-items: flex-start; }
.cs-num { font-size: calc(48 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; min-width: calc(44 * var(--u)); }
.cs-titulo { font-size: calc(34 * var(--u)); font-weight: 600; line-height: 1.1; margin-bottom: calc(6 * var(--u)); }
.cs-texto { font-size: calc(30 * var(--u)); line-height: 1.25; }
.s14-franja { border-left: calc(6 * var(--u)) solid var(--ambar); padding-left: calc(32 * var(--u)); }
.s14-lista { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.s14-item { font-size: calc(32 * var(--u)); line-height: 1.2; }
.s14-nombre { font-size: calc(30 * var(--u)); }

/* --- Qué no hace bien --- */
.li-lista { gap: calc(16 * var(--u)); }
.li-item { padding: calc(14 * var(--u)) calc(28 * var(--u)); }
.li-item p { font-size: calc(40 * var(--u)); }
.li-item .s19-icono { color: var(--rosa); width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.li-lista .s19-cierre { color: var(--texto); font-size: calc(44 * var(--u)); font-weight: 600; }

/* --- Tus datos y la IA --- */
.dt-enc { margin-bottom: calc(28 * var(--u)); }
.dt-enc .etiqueta { margin-bottom: calc(10 * var(--u)); }
.dt-cuerpo { display: flex; flex-direction: column; gap: calc(22 * var(--u)); min-height: 0; }
.dt-flujo { display: flex; align-items: center; gap: calc(14 * var(--u)); flex-wrap: wrap; }
.dt-paso { font-size: calc(30 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u)); border-radius: calc(999 * var(--u)); border: calc(2 * var(--u)) solid var(--cian); color: var(--cian); font-weight: 600; white-space: nowrap; }
.dt-flecha { font-size: calc(32 * var(--u)); color: var(--texto-2); display: inline-flex; }
.dt-lista { gap: calc(10 * var(--u)); justify-content: flex-start; }
.dt-item { padding: calc(10 * var(--u)) calc(24 * var(--u)); gap: calc(28 * var(--u)); }
.dt-item p { font-size: calc(38 * var(--u)); line-height: 1.25; }
.dt-item .s19-icono { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }

/* --- Recorrido por los asistentes --- */
.p-asistentes .encabezado { margin-bottom: calc(32 * var(--u)); }
.as-cuerpo { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-height: 0; }
.as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.as-tarjeta { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(20 * var(--u)) calc(28 * var(--u)); }
.as-enc { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.as-nombre { font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.1; }
.as-insignia { font-size: calc(22 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); border: calc(2 * var(--u)) solid var(--ambar); border-radius: calc(999 * var(--u)); padding: calc(2 * var(--u)) calc(14 * var(--u)); font-weight: 600; }
.as-creador { font-size: calc(26 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.as-linea { font-size: calc(30 * var(--u)); line-height: 1.25; margin: 0; }
.as-plan { font-size: calc(26 * var(--u)); margin-top: calc(6 * var(--u)); }
.as-otros { font-size: calc(30 * var(--u)); margin: 0; }
.as-cierre { font-size: calc(34 * var(--u)); margin: 0; line-height: 1.3; }

/* --- WhatsApp: instrucción --- */
.s25-instr { font-size: calc(36 * var(--u)); line-height: 1.3; margin: 0 0 calc(28 * var(--u)); }

/* --- Google AI Pro: grupos de beneficios --- */
.p-aiproQueEs .s22-cols { grid-template-columns: 2fr 1fr; gap: calc(64 * var(--u)); }
.p-aiproQueEs .s22-def { font-size: calc(34 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.ap-grupo { margin-top: calc(10 * var(--u)); }
.ap-grupo .etiqueta { font-size: calc(26 * var(--u)); }
.ap-grupo .s22-lista { margin-top: calc(4 * var(--u)); font-size: calc(30 * var(--u)); }
.ap-grupo .s22-lista li { margin-bottom: calc(4 * var(--u)); }
.s22-mes { font-size: calc(32 * var(--u)); font-weight: 500; }

/* --- Activación por enlace --- */
.ac-der { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); }
.ac-enlace { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(30 * var(--u)); color: var(--cian); padding: calc(10 * var(--u)) calc(24 * var(--u)); border: calc(2 * var(--u)) solid rgba(56, 189, 248, 0.5); border-radius: calc(999 * var(--u)); margin-bottom: calc(16 * var(--u)); text-align: center; }
.ac-anillo { width: calc(380 * var(--u)); height: calc(380 * var(--u)); }
.ac-num { font-size: calc(180 * var(--u)); }
.ac-de { font-size: calc(48 * var(--u)); margin-top: calc(-6 * var(--u)); }
.ac-contador { flex-direction: column; gap: calc(4 * var(--u)); }
.ac-der.completo .ac-num { color: var(--verde); }

/* --- Demo en vivo --- */
.dm-enc { margin-bottom: calc(20 * var(--u)); }
.dm-enc .etiqueta { margin-bottom: calc(8 * var(--u)); }
.dm-titulo { font-size: calc(80 * var(--u)); }
.dm-sub { font-size: calc(32 * var(--u)); color: var(--texto-2); margin: calc(10 * var(--u)) 0 0; line-height: 1.3; }
.dm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(64 * var(--u)); flex: 1; min-height: 0; }
.dm-lista { margin: calc(12 * var(--u)) 0 0; padding-left: calc(36 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.3; }
.dm-lista li { margin-bottom: calc(8 * var(--u)); }
.dm-crono { display: flex; align-items: center; justify-content: center; gap: calc(48 * var(--u)); margin-top: calc(8 * var(--u)); }
.dm-num { font-size: calc(170 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.dm-num.excedido { color: var(--ambar); }
.dm-lado { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: calc(340 * var(--u)); }
.dm-objetivo { font-size: calc(32 * var(--u)); }
.dm-exceso { font-size: calc(56 * var(--u)); font-weight: 600; min-height: calc(62 * var(--u)); line-height: 1.1; }
.dm-botones { display: flex; gap: calc(12 * var(--u)); align-items: center; flex-wrap: wrap; }
.dm-botones .boton { padding: calc(8 * var(--u)) calc(18 * var(--u)); }

/* ===========================================================================
   CLASE 2 · TALLER DE PROMPTS
   Pantallas S01–S26. Reutiliza los patrones de la clase 1 (arriba) y añade el
   patrón "tablero" (grillas por pareja con foco ámbar) y los cronómetros de
   trabajo de 160–240 px. Las reglas de esta sección pisan a las anteriores
   cuando coinciden en especificidad (van después en el archivo).
   =========================================================================== */

/* --- Agenda (8 bloques: 4 filas por columna) --- */
.p-agenda .s02-grid { grid-template-rows: repeat(4, minmax(0, 1fr)); }

/* --- Banda destacada (fragmentos de cierre en ámbar) --- */
.banda {
  border-left: calc(6 * var(--u)) solid var(--ambar);
  background: linear-gradient(90deg, rgba(245, 185, 66, 0.12), transparent 75%);
  border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0;
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.3;
  font-weight: 600;
}
.banda.centrada { text-align: center; border-left: 0; border-top: calc(6 * var(--u)) solid var(--ambar); border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u)); background: linear-gradient(180deg, rgba(245, 185, 66, 0.12), transparent 85%); }

/* --- S01 Portada --- */
.p-portada .s01-logo { display: none; }
.p-portada.con-logo .s01-logo { display: block; }

/* --- S03 Reconexión --- */
.p-reconexion .s03-promesa p { font-size: calc(48 * var(--u)); }

/* --- S04 Las parejas (tablero de tarjetas) --- */
.p-parejas .encabezado { margin-bottom: calc(20 * var(--u)); }
.pj-cuerpo .pj-grid { height: 100%; }
.pj-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); min-height: 0; }
.pj-tarjeta {
  background: var(--superficie);
  border: calc(3 * var(--u)) solid var(--borde-suave);
  border-radius: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  min-height: 0; overflow: hidden; cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.pj-tarjeta.enfocada { border-color: var(--ambar); }
.pj-enc { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.pj-id { font-size: calc(28 * var(--u)); font-weight: 700; color: var(--ambar); letter-spacing: 0.04em; }
.pj-trio {
  font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: 0.1em;
  color: var(--cian); border: calc(2 * var(--u)) solid var(--cian);
  border-radius: calc(999 * var(--u)); padding: 0 calc(12 * var(--u)); line-height: 1.6;
}
.pj-integrantes { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-height: 0; justify-content: center; }
.pj-miembro { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.pj-nombre { font-size: calc(36 * var(--u)); font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-miembro.ausente .pj-nombre { text-decoration: line-through; opacity: 0.4; }
.pj-miembro.ausente .pj-fila { opacity: 0.4; }
.pj-fila { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.pj-fila .puntos-nivel .puntos-texto { display: none; }
.pj-regla { margin-top: calc(18 * var(--u)); }

/* --- S05 Check de arranque --- */
.ck-cols { flex: 1; display: grid; grid-template-columns: 55fr 45fr; gap: calc(64 * var(--u)); min-height: 0; }
.ck-izq { display: flex; flex-direction: column; min-height: 0; }
.ck-pasos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(14 * var(--u)); font-size: calc(38 * var(--u)); line-height: 1.3; flex: 1; justify-content: center; }
.ck-ayuda { font-size: calc(32 * var(--u)); margin: calc(20 * var(--u)) 0 0; line-height: 1.3; }
.ck-der { display: flex; flex-direction: column; gap: calc(28 * var(--u)); justify-content: center; min-height: 0; }
.ck-wifi { padding: calc(28 * var(--u)) calc(36 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ck-wifi .etiqueta { margin-bottom: calc(6 * var(--u)); }
.ck-wifi-fila { display: flex; align-items: baseline; gap: calc(20 * var(--u)); font-size: calc(34 * var(--u)); }
.ck-wifi-campo { color: var(--texto-2); font-size: calc(28 * var(--u)); min-width: calc(100 * var(--u)); }
.ck-contador { padding: calc(28 * var(--u)) calc(36 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); }
.ck-num { font-size: calc(120 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; }
.ck-de { font-size: calc(48 * var(--u)); color: var(--texto-2); }
.ck-todas { font-size: calc(32 * var(--u)); font-weight: 600; color: var(--verde); visibility: hidden; min-height: calc(40 * var(--u)); }
.ck-contador.completo .ck-num { color: var(--verde); }
.ck-contador.completo .ck-todas { visibility: visible; }
.ck-botones { display: flex; gap: calc(10 * var(--u)); }
.ck-botones .boton { min-width: calc(64 * var(--u)); justify-content: center; padding: calc(2 * var(--u)) calc(16 * var(--u)); font-size: calc(32 * var(--u)); }

/* --- S07 El mismo pedido, dos resultados --- */
.ad-cols { flex: 1; display: grid; grid-template-columns: 35fr 65fr; gap: calc(48 * var(--u)); min-height: 0; }
.ad-izq { display: flex; flex-direction: column; gap: calc(20 * var(--u)); opacity: 0.72; justify-content: center; }
.ad-tarjeta { padding: calc(32 * var(--u)) calc(36 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.ad-tarjeta-titulo { font-size: calc(28 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.ad-pobre { font-size: calc(36 * var(--u)); line-height: 1.25; margin: 0; }
.ad-respuesta { font-size: calc(30 * var(--u)); font-style: italic; color: var(--texto-2); margin: 0; line-height: 1.3; }
.ad-mala { align-self: flex-start; font-size: calc(26 * var(--u)); font-weight: 600; color: var(--rosa); border: calc(2 * var(--u)) solid var(--rosa); border-radius: calc(999 * var(--u)); padding: calc(2 * var(--u)) calc(18 * var(--u)); opacity: 0.9; }
.ad-der { display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-height: 0; }
.ad-tarjeta.activa { border-color: rgba(245, 185, 66, 0.45); }
.ad-tarjeta.activa .ad-tarjeta-titulo { color: var(--ambar); }
.ad-pieza { display: grid; grid-template-columns: calc(230 * var(--u)) 1fr; gap: calc(24 * var(--u)); align-items: baseline; }
.ad-etiqueta { font-size: calc(26 * var(--u)); font-weight: 700; letter-spacing: 0.1em; color: var(--ambar); }
.ad-texto { font-size: calc(32 * var(--u)); line-height: 1.28; }
.ad-banda { margin-top: calc(8 * var(--u)); }

/* --- S08 Las cinco piezas --- */
.pz-fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(20 * var(--u)); align-content: center; flex: 1; min-height: 0; }
.pz-tarjeta { display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(32 * var(--u)) calc(26 * var(--u)); justify-content: center; min-height: 0; }
.pz-num { font-size: calc(96 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; }
.pz-pieza { font-size: calc(48 * var(--u)); font-weight: 600; line-height: 1.1; }
.pz-apoyo { font-size: calc(32 * var(--u)); line-height: 1.28; }
.pz-pie { font-size: calc(32 * var(--u)); margin-top: calc(24 * var(--u)); text-align: center; }

/* --- S09 Los tres errores de novato --- */
.er-lista { display: flex; flex-direction: column; gap: calc(20 * var(--u)); justify-content: center; flex: 1; min-height: 0; }
.er-item { display: grid; grid-template-columns: calc(480 * var(--u)) calc(70 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: center; padding: calc(18 * var(--u)) calc(32 * var(--u)); }
.er-error { font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.15; }
.er-flecha { color: var(--rosa); font-size: calc(40 * var(--u)); display: inline-flex; }
.er-consecuencia { font-size: calc(36 * var(--u)); color: var(--texto-2); line-height: 1.25; }
.er-cierre { margin-top: calc(20 * var(--u)); }

/* --- S10 ¿Qué son los tokens? --- */
.tk-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(20 * var(--u)); min-height: 0; }
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); flex: 1; min-height: 0; align-items: stretch; }
.tk-tarjeta { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(28 * var(--u)) calc(30 * var(--u)); justify-content: flex-start; }
.tk-titulo { font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1.15; }
.tk-texto { font-size: calc(28 * var(--u)); line-height: 1.35; margin: 0; }
.tk-ejemplos { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); background: rgba(0, 0, 0, 0.25); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(1.5 * var(--u)) solid var(--borde-suave); }
.tk-ejemplo { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(26 * var(--u)); }
.tk-palabra { font-weight: 600; min-width: calc(160 * var(--u)); }
.tk-flecha { color: var(--texto-2); }
.tk-chips { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.tk-chip { background: rgba(245, 185, 66, 0.15); color: var(--ambar); border: calc(1.5 * var(--u)) solid rgba(245, 185, 66, 0.4); border-radius: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); font-family: var(--fuente); font-size: calc(24 * var(--u)); font-weight: 700; }
.tk-metrica-caja { margin-top: calc(10 * var(--u)); background: rgba(56, 189, 248, 0.08); border: calc(2 * var(--u)) solid rgba(56, 189, 248, 0.25); border-radius: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.tk-metrica { font-size: calc(28 * var(--u)); font-weight: 700; color: var(--cian); }
.tk-detalle { font-size: calc(24 * var(--u)); line-height: 1.3; }
.tk-puntos { margin: calc(6 * var(--u)) 0 0; padding-left: calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.3; color: var(--texto-2); }
.tk-banda { margin-top: calc(4 * var(--u)); }

/* --- S11 Tokens de contexto y la ventana de memoria --- */
.cx-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(18 * var(--u)); min-height: 0; }
.cx-arriba { flex: 0 0 auto; }
.cx-formula { padding: calc(18 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); background: var(--superficie); }
.cx-formula-fila { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); }
.cx-elem { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.cx-elem-nombre { font-size: calc(32 * var(--u)); font-weight: 700; line-height: 1.1; }
.cx-elem-desc { font-size: calc(24 * var(--u)); }
.cx-mas, .cx-igual { font-size: calc(34 * var(--u)); font-weight: 700; color: var(--texto-2); }
.cx-elem-res .cx-elem-nombre { color: var(--verde); font-size: calc(36 * var(--u)); }
.cx-abajo { display: grid; grid-template-columns: 58fr 42fr; gap: calc(24 * var(--u)); flex: 1; min-height: 0; }
.cx-evolucion { padding: calc(22 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); justify-content: center; }
.cx-niveles { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.cx-nivel { padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, 0.03); border: calc(1.5 * var(--u)) solid var(--borde-suave); display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.cx-nivel.destacado { background: rgba(52, 211, 153, 0.1); border-color: var(--verde); }
.cx-nivel-enc { display: flex; align-items: baseline; justify-content: space-between; font-size: calc(28 * var(--u)); font-weight: 600; }
.cx-epoca { color: var(--texto); min-width: calc(220 * var(--u)); }
.cx-limite { color: var(--cian); font-weight: 700; }
.cx-nivel.destacado .cx-limite { color: var(--verde); font-size: calc(32 * var(--u)); }
.cx-pags { font-size: calc(26 * var(--u)); font-weight: 700; }
.cx-nivel-nota { font-size: calc(24 * var(--u)); line-height: 1.25; }
.cx-alerta { padding: calc(24 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); justify-content: center; border-color: rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.06); }
.cx-alerta-tit { font-size: calc(32 * var(--u)); font-weight: 700; color: var(--rosa); line-height: 1.2; }
.cx-alerta-txt { font-size: calc(27 * var(--u)); line-height: 1.35; margin: 0; }
.cx-banda { flex: 0 0 auto; }

/* --- S12 El contexto multimodal --- */
.mm-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(20 * var(--u)); min-height: 0; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(20 * var(--u)); flex: 1; min-height: 0; }
.mm-tarjeta { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(24 * var(--u)) calc(30 * var(--u)); justify-content: center; }
.mm-enc { display: flex; align-items: center; margin-bottom: calc(4 * var(--u)); }
.mm-badge { font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: 0.1em; color: var(--ambar); background: rgba(245, 185, 66, 0.12); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(6 * var(--u)); border: calc(1.5 * var(--u)) solid rgba(245, 185, 66, 0.3); }
.mm-tit { font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.15; }
.mm-desc { font-size: calc(28 * var(--u)); line-height: 1.35; margin: 0; }
.mm-banda { flex: 0 0 auto; }

/* --- S13 Conectores y Canvas --- */
.hc-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(20 * var(--u)); min-height: 0; }
.hc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); flex: 1; min-height: 0; }
.hc-panel { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(26 * var(--u)) calc(32 * var(--u)); min-height: 0; justify-content: flex-start; }
.hc-panel-tit { font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1.15; }
.hc-panel-sub { font-size: calc(27 * var(--u)); margin: 0 0 calc(4 * var(--u)); line-height: 1.3; }
.hc-items { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.hc-item { display: flex; flex-direction: column; gap: calc(4 * var(--u)); background: rgba(0, 0, 0, 0.2); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); border-left: calc(4 * var(--u)) solid var(--borde); }
.hc-item-nombre { font-size: calc(29 * var(--u)); font-weight: 700; line-height: 1.2; }
.hc-item-desc { font-size: calc(25 * var(--u)); line-height: 1.3; margin: 0; }
.hc-banda { flex: 0 0 auto; }

/* --- S15 El reto · Encuadre --- */
.rt-tarjetas { display: flex; flex-direction: column; gap: calc(20 * var(--u)); justify-content: center; flex: 1; min-height: 0; }
.rt-tarjeta { display: grid; grid-template-columns: calc(320 * var(--u)) 1fr; gap: calc(32 * var(--u)); align-items: center; padding: calc(24 * var(--u)) calc(36 * var(--u)); }
.rt-tarjeta .etiqueta { font-size: calc(30 * var(--u)); }
.rt-tarjeta p { font-size: calc(40 * var(--u)); line-height: 1.3; margin: 0; }
.rt-banda { margin-top: calc(20 * var(--u)); }

/* --- S16 El reto · La misión --- */
.mi-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(20 * var(--u)); min-height: 0; flex: 1; }
.mi-hito { display: flex; gap: calc(24 * var(--u)); padding: calc(24 * var(--u)) calc(32 * var(--u)); align-items: flex-start; min-height: 0; }
.mi-n { font-size: calc(64 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1; min-width: calc(120 * var(--u)); }
.mi-titulo { font-size: calc(40 * var(--u)); font-weight: 600; line-height: 1.15; margin-bottom: calc(8 * var(--u)); }
.mi-texto { font-size: calc(32 * var(--u)); color: var(--texto-2); line-height: 1.28; }
.mi-reglas { margin-top: calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(32 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.mi-reglas p { font-size: calc(32 * var(--u)); line-height: 1.3; margin: 0; }
.mi-nota { font-size: calc(32 * var(--u)); margin-top: calc(16 * var(--u)); }

/* --- S17 El reto · Tablero de progreso --- */
.p-tablero { padding-top: calc(48 * var(--u)); }
.tb-franja { display: flex; align-items: center; gap: calc(48 * var(--u)); margin-bottom: calc(24 * var(--u)); flex: 0 0 auto; }
.tb-crono { font-size: calc(160 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tb-crono.ambar, .tb-crono.terminado { color: var(--ambar); }
.tb-crono.parpadea { animation: parpadeo 1s ease-in-out infinite; }
.tb-lado { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.tb-regresamos { font-size: calc(36 * var(--u)); min-height: calc(44 * var(--u)); }
.tb-resumen { font-size: calc(40 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-mensaje { font-size: calc(36 * var(--u)); color: var(--ambar); font-weight: 600; min-height: calc(44 * var(--u)); }
.tb-botones { margin-left: auto; display: flex; gap: calc(10 * var(--u)); align-items: center; }
.tb-botones .boton { padding: calc(6 * var(--u)) calc(18 * var(--u)); }
.tb-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.tb-fila {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: calc(520 * var(--u)) repeat(4, 1fr);
  gap: calc(12 * var(--u)); align-items: center;
  padding: 0 calc(18 * var(--u));
  border: calc(3 * var(--u)) solid transparent;
  border-radius: calc(14 * var(--u));
  background: var(--superficie);
  transition: border-color 120ms, background 120ms;
}
.tb-fila.enfocada { border-color: var(--ambar); }
.tb-pareja { display: flex; align-items: baseline; gap: calc(16 * var(--u)); min-width: 0; }
.tb-id { font-size: calc(32 * var(--u)); font-weight: 700; color: var(--ambar); flex: 0 0 auto; }
.tb-nombres { font-size: calc(32 * var(--u)); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-celda {
  align-self: stretch; margin: calc(8 * var(--u)) 0;
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  border: calc(3 * var(--u)) dashed var(--borde);
  border-radius: calc(12 * var(--u));
  font-size: calc(30 * var(--u)); font-weight: 600; color: var(--texto-2);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.tb-celda .icono { display: none; }
.tb-celda.completo { border-style: solid; border-color: var(--verde); background: rgba(52, 211, 153, 0.18); color: var(--verde); }
.tb-celda.completo .icono { display: inline-block; }

/* --- S18 Puesta en común · Las adjudicaciones --- */
.aj-contadores { display: flex; gap: calc(40 * var(--u)); justify-content: center; margin-bottom: calc(28 * var(--u)); flex: 0 0 auto; }
.aj-contador { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); min-width: calc(240 * var(--u)); }
.aj-contador-num { font-size: calc(96 * var(--u)); font-weight: 700; line-height: 1; }
.aj-contador-etq { font-size: calc(32 * var(--u)); font-weight: 600; letter-spacing: 0.06em; }
.aj-contador.a .aj-contador-num, .aj-contador.a .aj-contador-etq { color: var(--verde); }
.aj-contador.b .aj-contador-num, .aj-contador.b .aj-contador-etq,
.aj-contador.c .aj-contador-num, .aj-contador.c .aj-contador-etq { color: var(--texto-2); }
.aj-contador.n .aj-contador-num, .aj-contador.n .aj-contador-etq { color: var(--cian); }
.aj-contador.n .aj-contador-etq { font-size: calc(26 * var(--u)); }
.aj-lista { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: calc(8 * var(--u)) calc(32 * var(--u)); }
.aj-fila {
  display: flex; align-items: center; gap: calc(20 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: calc(3 * var(--u)) solid transparent;
  border-radius: calc(14 * var(--u));
  background: var(--superficie);
  cursor: pointer; min-height: 0;
  transition: border-color 120ms, background 120ms;
}
.aj-fila.enfocada { border-color: var(--ambar); }
.aj-id { font-size: calc(30 * var(--u)); font-weight: 700; color: var(--ambar); }
.aj-nombres { font-size: calc(30 * var(--u)); color: var(--texto-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-eleccion { font-size: calc(56 * var(--u)); font-weight: 700; line-height: 1; min-width: calc(64 * var(--u)); text-align: center; }
.aj-eleccion.vacia { color: var(--texto-2); opacity: 0.5; font-weight: 400; }
.aj-eleccion.a { color: var(--verde); }
.aj-eleccion.n { color: var(--cian); }

/* --- S19 Puesta en común · El resultado --- */
.rs-lista { display: flex; flex-direction: column; gap: calc(14 * var(--u)); flex: 1; min-height: 0; justify-content: center; }
.rs-tarjeta { display: grid; grid-template-columns: calc(400 * var(--u)) auto 1fr; gap: calc(28 * var(--u)); align-items: center; padding: calc(16 * var(--u)) calc(32 * var(--u)); }
.rs-etiqueta { font-size: calc(34 * var(--u)); font-weight: 600; line-height: 1.15; }
.rs-tarjeta p { font-size: calc(30 * var(--u)); line-height: 1.28; margin: 0; }
.rs-tarjeta .insignia { white-space: nowrap; }
.insignia.excluida { color: var(--rosa); }
.insignia.observada { color: var(--cian); }
.insignia.adjudicar { color: var(--verde); }
.rs-tabla { display: flex; align-items: center; gap: calc(24 * var(--u)) calc(48 * var(--u)); flex-wrap: wrap; padding: calc(16 * var(--u)) calc(32 * var(--u)); }
.rs-tabla-titulo { font-size: calc(30 * var(--u)); color: var(--texto-2); }
.rs-puntos { display: flex; gap: calc(40 * var(--u)); }
.rs-punto { font-size: calc(44 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-punto .rs-oferta { color: var(--ambar); }
.rs-notab { font-size: calc(30 * var(--u)); color: var(--texto-2); }
.rs-linea { font-size: calc(32 * var(--u)); color: var(--verde); font-weight: 600; }
.rs-banda { margin-top: calc(14 * var(--u)); }

/* --- Puesta en común · Radiografía de las entregas --- */
.rg-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); }
.rg-kpi { padding: calc(18 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.rg-kpi-num { font-size: calc(52 * var(--u)); font-weight: 700; line-height: 1; }
.rg-kpi-etq { font-size: calc(24 * var(--u)); font-weight: 600; color: var(--texto); margin-top: calc(6 * var(--u)); }
.rg-kpi-det { font-size: calc(19 * var(--u)); margin-top: calc(4 * var(--u)); line-height: 1.25; }
.rg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); flex: 1; min-height: 0; margin-top: calc(14 * var(--u)); }
.rg-panel { padding: calc(20 * var(--u)) calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.rg-panel-tit { font-size: calc(28 * var(--u)); font-weight: 700; display: flex; align-items: center; gap: calc(10 * var(--u)); }
.rg-items { display: flex; flex-direction: column; gap: calc(10 * var(--u)); justify-content: space-around; flex: 1; }
.rg-item-nom { font-size: calc(24 * var(--u)); font-weight: 600; }
.rg-item-desc { font-size: calc(20 * var(--u)); line-height: 1.28; }
.rg-banda { margin-top: calc(12 * var(--u)); font-size: calc(24 * var(--u)); }

/* --- Puesta en común · Ranking de respuestas --- */
.rk-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rk-rubrica-banner { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); font-size: calc(20 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.rk-rubrica-txt { color: var(--cian); font-weight: 500; line-height: 1.25; }
.rk-niveles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); flex: 1; min-height: 0; }
.rk-card { padding: calc(18 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); border-top: calc(5 * var(--u)) solid transparent; }
.rk-card.tier-oro { border-top-color: var(--verde); }
.rk-card.tier-plata { border-top-color: var(--cian); }
.rk-card.tier-alerta { border-top-color: var(--ambar); background: rgba(245, 158, 11, 0.06); }
.rk-card.tier-incompleto { border-top-color: var(--rosa); opacity: 0.85; }
.rk-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(6 * var(--u)); }
.rk-card-tit-wrap { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.rk-card-nivel { font-size: calc(21 * var(--u)); font-weight: 700; line-height: 1.2; }
.rk-card-puntos { font-size: calc(22 * var(--u)); font-weight: 800; white-space: nowrap; }
.rk-card-cant { font-size: calc(19 * var(--u)); font-weight: 600; }
.rk-card-desc { font-size: calc(18 * var(--u)); line-height: 1.3; margin: 0; flex: 1; color: var(--texto); }
.rk-card-ejemplos { font-size: calc(16 * var(--u)); line-height: 1.25; margin-top: auto; padding-top: calc(8 * var(--u)); border-top: 1px solid var(--borde); }
.tier-oro { color: var(--verde); }
.tier-plata { color: var(--cian); }
.tier-alerta { color: var(--ambar); }
.tier-incompleto { color: var(--rosa); }
.rk-banda { margin-top: calc(12 * var(--u)); font-size: calc(24 * var(--u)); }

/* --- Puesta en común · Hallazgos y citas del aula --- */
.hg-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hg-ofertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); flex: 1; min-height: 0; }
.hg-card { padding: calc(18 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: calc(5 * var(--u)) solid transparent; }
.hg-card.excluida { border-top-color: var(--rosa); }
.hg-card.observada { border-top-color: var(--cian); }
.hg-card.adjudicar { border-top-color: var(--verde); }
.hg-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(8 * var(--u)); }
.hg-card-nombre { font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.2; }
.hg-card-monto { font-size: calc(22 * var(--u)); font-weight: 600; white-space: nowrap; }
.hg-citas { display: flex; flex-direction: column; gap: calc(10 * var(--u)); flex: 1; justify-content: center; }
.hg-cita { font-size: calc(19 * var(--u)); line-height: 1.32; font-style: italic; color: var(--texto); border-left: calc(3 * var(--u)) solid var(--borde); padding-left: calc(10 * var(--u)); margin: 0; }
.hg-didactico { margin-top: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)); border-left: calc(4 * var(--u)) solid var(--ambar); background: rgba(245, 158, 11, 0.08); }
.hg-didactico-header { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.hg-didactico-tit { font-size: calc(24 * var(--u)); font-weight: 700; }
.hg-didactico-desc { font-size: calc(21 * var(--u)); line-height: 1.3; margin: calc(6 * var(--u)) 0 calc(4 * var(--u)); color: var(--texto); }
.hg-didactico-lec { font-size: calc(21 * var(--u)); line-height: 1.3; margin: 0; }

/* --- Puesta en común · Lecciones del reto --- */
.lr-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lr-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(18 * var(--u)); flex: 1; min-height: 0; }
.lr-card { padding: calc(22 * var(--u)) calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); justify-content: center; }
.lr-num { font-size: calc(38 * var(--u)); font-weight: 800; line-height: 1; font-family: var(--fuente-mono); }
.lr-tit { font-size: calc(28 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--texto); }
.lr-desc { font-size: calc(21 * var(--u)); line-height: 1.32; margin: 0; }
.lr-banda { margin-top: calc(14 * var(--u)); font-size: calc(24 * var(--u)); }

/* --- S20 Tu biblioteca de prompts --- */
.bib-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: calc(20 * var(--u)); min-height: 0; flex: 1; }
.bib-tarjeta { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)); justify-content: center; min-height: 0; }
.bib-nombre { font-size: calc(44 * var(--u)); font-weight: 700; color: var(--ambar); line-height: 1.1; }
.bib-para { font-size: calc(32 * var(--u)); line-height: 1.28; }
.bib-cuando { font-size: calc(28 * var(--u)); color: var(--texto-2); line-height: 1.28; }
.bib-pie { font-size: calc(32 * var(--u)); margin-top: calc(20 * var(--u)); text-align: center; }

/* --- S22 Cómo conservarla --- */
.cv-pasos { display: flex; flex-direction: column; gap: calc(32 * var(--u)); justify-content: center; flex: 1; min-height: 0; }
.cv-paso { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.cv-texto { font-size: calc(48 * var(--u)); font-weight: 600; line-height: 1.2; }
.cv-nota { font-size: calc(36 * var(--u)); color: var(--texto-2); line-height: 1.3; }
.cv-banda { margin-top: calc(28 * var(--u)); }

/* --- S24 Tarea puente y ticket de salida --- */
.tp2-cols { flex: 1; display: grid; grid-template-columns: 55fr 45fr; gap: calc(64 * var(--u)); min-height: 0; }
.tp2-tareas { display: flex; flex-direction: column; gap: calc(24 * var(--u)); justify-content: center; }
.tp2-tarea { padding: calc(32 * var(--u)) calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.tp2-texto { font-size: calc(40 * var(--u)); font-weight: 600; line-height: 1.2; }
.tp2-nota { font-size: calc(32 * var(--u)); color: var(--texto-2); line-height: 1.3; }
.tp2-ticket { align-self: center; padding: calc(40 * var(--u)) calc(48 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); width: 100%; }
.tp2-ticket .etiqueta { margin-bottom: calc(8 * var(--u)); }
.tp2-preguntas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(20 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.3; }

/* --- S25 Despedida --- */
.p-despedida { justify-content: center; align-items: center; }
.dp-tarjeta { padding: calc(64 * var(--u)) calc(80 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); text-align: center; align-items: center; }
.dp-fecha, .dp-hora { font-size: calc(56 * var(--u)); font-weight: 600; line-height: 1.2; }
.dp-linea { font-size: calc(32 * var(--u)); margin-top: calc(12 * var(--u)); }

/* ===========================================================================
   CLASE 3 · Pantallas nuevas (componentes "archivo" y "respuesta citada",
   base de conocimiento, prueba de fuego, resultado)
   =========================================================================== */
.etiqueta.verde { color: var(--verde); }
.etiqueta.rosa { color: var(--rosa); }
.insignia.verde { color: var(--verde); }
.insignia.cian { color: var(--cian); }
.insignia.ambar { color: var(--ambar); }

/* Bloque monoespaciado para árboles de carpeta y archivos .md */
.archivo {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: calc(32 * var(--u));
  line-height: 1.4;
  background: #0E1626;
  border: calc(2 * var(--u)) solid var(--borde-suave);
  border-radius: calc(14 * var(--u));
  padding: calc(24 * var(--u)) calc(32 * var(--u));
}

/* Etiqueta de cita: archivo · artículo en cian; SIN CITA en rosa */
.cita {
  display: inline-block;
  font-size: calc(30 * var(--u));
  font-weight: 600;
  color: var(--cian);
  border: calc(2 * var(--u)) solid var(--cian);
  border-radius: calc(10 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  white-space: nowrap;
  line-height: 1.35;
}
.cita.sin { color: var(--rosa); border-color: var(--rosa); letter-spacing: 0.1em; }

/* Pasos con nota secundaria (S05, S09, S21) */
.c3-pasos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(20 * var(--u)); font-size: calc(38 * var(--u)); line-height: 1.25; justify-content: center; }
.c3-nota { font-size: calc(32 * var(--u)); margin-top: calc(4 * var(--u)); line-height: 1.25; }
.ck-pasos.c3-pasos { gap: calc(16 * var(--u)); font-size: calc(36 * var(--u)); }

/* S06 Del chat al agente */
.ca-cuerpo { display: flex; flex-direction: column; gap: calc(20 * var(--u)); justify-content: center; }
.ca-enc, .ca-fila { display: grid; grid-template-columns: 40fr calc(80 * var(--u)) 60fr; gap: calc(16 * var(--u)); align-items: stretch; }
.ca-col-titulo { font-size: calc(30 * var(--u)); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ca-chat { opacity: 0.72; font-size: calc(34 * var(--u)); padding: calc(24 * var(--u)) calc(32 * var(--u)); display: flex; align-items: center; }
.ca-agente { font-size: calc(38 * var(--u)); font-weight: 600; padding: calc(24 * var(--u)) calc(32 * var(--u)); border-color: rgba(245, 185, 66, 0.45); display: flex; align-items: center; }
.ca-flecha { display: flex; align-items: center; justify-content: center; font-size: calc(48 * var(--u)); }
.p-chatAgente .banda { margin-top: calc(28 * var(--u)); }

/* S07 Base de conocimiento */
.bs-cols { display: grid; grid-template-columns: 45fr 55fr; gap: calc(48 * var(--u)); align-items: center; }
.bs-arbol { padding: calc(28 * var(--u)) calc(32 * var(--u)); font-size: calc(30 * var(--u)); }
.bs-nodo { white-space: nowrap; color: var(--texto-2); }
.bs-nodo.carpeta { color: var(--texto); font-weight: 600; }
.bs-nodo.destacado { color: var(--ambar); }
.bs-capas { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.bs-capa { display: flex; gap: calc(28 * var(--u)); align-items: flex-start; padding: calc(24 * var(--u)) calc(32 * var(--u)); }
.bs-n { font-size: calc(56 * var(--u)); font-weight: 700; line-height: 1; min-width: calc(80 * var(--u)); }
.bs-titulo { font-size: calc(38 * var(--u)); font-weight: 600; line-height: 1.15; margin-bottom: calc(6 * var(--u)); }
.bs-texto { font-size: calc(32 * var(--u)); line-height: 1.28; }
.p-base .banda { margin-top: calc(24 * var(--u)); }

/* S08 Sin cita no hay respuesta */
.p-sinCita .encabezado { margin-bottom: calc(20 * var(--u)); }
.sc-pregunta { font-size: calc(40 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.sc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); align-items: stretch; }
.respuesta { display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(32 * var(--u)) calc(36 * var(--u)); }
.respuesta-texto { font-size: calc(40 * var(--u)); line-height: 1.28; margin: 0; }
.respuesta-citas { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.sc-mala { opacity: 0.85; }
.sc-buena { border-color: rgba(56, 189, 248, 0.55); }
.sc-nota { font-size: calc(32 * var(--u)); margin: 0; font-weight: 600; }
.sc-reglas { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); margin-top: calc(24 * var(--u)); }
.sc-regla { font-size: calc(34 * var(--u)); }

/* S09 Práctica 1 · Encuadre */
.p1-cols { display: grid; grid-template-columns: 60fr 40fr; gap: calc(56 * var(--u)); align-items: center; }
.p1-entregable { border-color: var(--verde); border-width: calc(3 * var(--u)); padding: calc(36 * var(--u)); }
.p1-entregable p { font-size: calc(40 * var(--u)); line-height: 1.3; margin: calc(16 * var(--u)) 0 0; }

/* S10 Práctica 1 · Cronómetro y preguntas */
.pr-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(14 * var(--u)); justify-content: center; }
.pr-item { display: grid; grid-template-columns: calc(64 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: baseline; background: var(--superficie); border-radius: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(28 * var(--u)); }
.pr-n { font-size: calc(44 * var(--u)); font-weight: 700; }
.pr-texto { font-size: calc(36 * var(--u)); line-height: 1.25; }

/* S11 Práctica 1 · Puesta en común */
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(48 * var(--u)); min-height: 0; }
.pp-preguntas { display: flex; flex-direction: column; justify-content: center; gap: calc(28 * var(--u)); }
.pp-pregunta { font-size: calc(40 * var(--u)); line-height: 1.28; margin: 0; }
.pp-lista { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); min-height: 0; }
.pp-cont { flex: 1; min-height: 0; }
.p-puestaPractica .banda { margin-top: calc(24 * var(--u)); }

/* S13 De la plantilla al asistente */
.pa-filas { display: flex; flex-direction: column; gap: calc(12 * var(--u)); justify-content: center; }
.pa-fila { display: grid; grid-template-columns: calc(300 * var(--u)) calc(60 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: center; }
.pa-pieza { font-size: calc(32 * var(--u)); font-weight: 700; letter-spacing: 0.1em; }
.pa-flecha { font-size: calc(36 * var(--u)); display: flex; justify-content: center; }
.pa-archivo { padding: calc(8 * var(--u)) calc(22 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.3; }
.p-plantillaAsistente .encabezado { margin-bottom: calc(24 * var(--u)); }
.p-plantillaAsistente .pa-filas { gap: calc(10 * var(--u)); }
.pa-seccion { font-weight: 700; }
.pa-texto { color: var(--texto); }
.p-plantillaAsistente .banda { margin-top: calc(20 * var(--u)); }

/* S14 El archivo, completo */
.p-agentsEjemplo { padding-top: calc(56 * var(--u)); padding-bottom: calc(100 * var(--u)); }
.ag-marco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ag-barra { display: flex; align-items: center; gap: calc(12 * var(--u)); background: var(--superficie-2); border: calc(2 * var(--u)) solid var(--borde-suave); border-bottom: 0; border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; padding: calc(10 * var(--u)) calc(24 * var(--u)); }
.ag-archivo { font-size: calc(28 * var(--u)); color: var(--texto-2); display: inline-flex; gap: calc(10 * var(--u)); align-items: center; }
.ag-cuerpo { flex: 1; min-height: 0; border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u)); font-family: var(--fuente); font-size: calc(28 * var(--u)); line-height: 1.26; padding: calc(16 * var(--u)) calc(28 * var(--u)); column-count: 2; column-gap: calc(48 * var(--u)); column-fill: auto; }
.ag-enc { font-weight: 700; break-after: avoid; }
.ag-vacia { height: calc(8 * var(--u)); }
.ag-linea { break-inside: avoid; }
.ag-pie { font-size: calc(28 * var(--u)); margin: calc(12 * var(--u)) 0 0; text-align: center; }

/* S18 Prueba de fuego */
.p-pruebaFuego .encabezado { margin-bottom: calc(20 * var(--u)); }
.pf-arriba { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-bottom: calc(20 * var(--u)); flex: 0 0 auto; }
.pf-pregunta { font-size: calc(40 * var(--u)); line-height: 1.25; padding: calc(20 * var(--u)) calc(32 * var(--u)); font-weight: 600; }
.pf-instruccion { font-size: calc(32 * var(--u)); }
.pf-contadores { display: flex; gap: calc(40 * var(--u)); justify-content: center; margin-bottom: calc(16 * var(--u)); flex: 0 0 auto; }
.pf-contador { display: flex; flex-direction: column; align-items: center; min-width: calc(220 * var(--u)); }
.pf-contador-num { font-size: calc(80 * var(--u)); font-weight: 700; line-height: 1; }
.pf-contador-etq { font-size: calc(28 * var(--u)); font-weight: 600; letter-spacing: 0.08em; }
.pf-contador.no_esta { color: var(--verde); }
.pf-contador.invento { color: var(--rosa); }
.pf-contador.dudosa { color: var(--cian); }
.pf-contador.vacia { color: var(--texto-2); }
.pf-lista .aj-fila { padding: 0 calc(20 * var(--u)); }
.pf-estado { font-size: calc(32 * var(--u)); font-weight: 700; letter-spacing: 0.08em; min-width: calc(180 * var(--u)); text-align: center; border-radius: calc(10 * var(--u)); padding: calc(2 * var(--u)) calc(12 * var(--u)); }
.pf-estado.vacia { color: var(--texto-2); opacity: 0.5; font-weight: 400; }
.pf-estado.no_esta { color: var(--verde); border: calc(2 * var(--u)) solid var(--verde); }
.pf-estado.invento { color: var(--rosa); border: calc(2 * var(--u)) solid var(--rosa); }
.pf-estado.dudosa { color: var(--cian); border: calc(2 * var(--u)) solid var(--cian); }

/* S19 El resultado */
.p-resultado .encabezado { margin-bottom: calc(16 * var(--u)); }
.p-resultado .titulo { font-size: calc(72 * var(--u)); }
.re-cuerpo { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.re-arriba { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.re-tarjeta, .re-expediente { padding: calc(16 * var(--u)) calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.re-enc { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.re-etiqueta { font-size: calc(34 * var(--u)); font-weight: 600; }
.re-enc .insignia { font-size: calc(26 * var(--u)); padding: calc(2 * var(--u)) calc(16 * var(--u)); }
.re-tarjeta p { font-size: calc(32 * var(--u)); line-height: 1.25; margin: 0; }
.re-pie { display: flex; align-items: center; gap: calc(20 * var(--u)); flex-wrap: wrap; }
.re-linea { font-size: calc(32 * var(--u)); font-weight: 600; }
.re-lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: calc(8 * var(--u)) calc(40 * var(--u)); }
.re-lista li { display: grid; grid-template-columns: calc(36 * var(--u)) 1fr auto; gap: calc(12 * var(--u)); align-items: center; }
.re-n { font-size: calc(32 * var(--u)); font-weight: 700; }
.re-obs { font-size: calc(32 * var(--u)); line-height: 1.2; }
.re-lista .cita, .re-nota .cita { font-size: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); }
.re-nota { display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: calc(32 * var(--u)); color: var(--rosa); font-weight: 600; }
.p-resultado .banda { margin-top: calc(14 * var(--u)); font-size: calc(36 * var(--u)); padding: calc(12 * var(--u)) calc(28 * var(--u)); }

/* S20 Lo que acaban de construir */
.co-lineas { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(36 * var(--u)); text-align: center; }
.co-linea { font-size: calc(56 * var(--u)); line-height: 1.2; margin: 0; max-width: calc(1500 * var(--u)); }
.co-final { font-weight: 700; }

/* S21 Su propio documento */
.dp3-cols { display: grid; grid-template-columns: 60fr 40fr; gap: calc(48 * var(--u)); align-items: center; }
.dp3-pasos { gap: calc(14 * var(--u)); font-size: calc(36 * var(--u)); }
.dp3-aviso { border-color: rgba(251, 113, 133, 0.55); padding: calc(36 * var(--u)); }
.dp3-aviso p { font-size: calc(36 * var(--u)); line-height: 1.3; margin: calc(16 * var(--u)) 0 0; }

/* S22 Clase 4 */
.c4-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); align-content: center; }
.c4-tarjeta { padding: calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.c4-titulo { font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.15; }
.c4-texto { font-size: calc(36 * var(--u)); line-height: 1.3; }
.p-clase4 .banda { margin-top: calc(28 * var(--u)); }

/* S16 La misión: filas que crecen con el contenido (evita desborde dentro de las tarjetas) */
.p-mision .encabezado { margin-bottom: calc(32 * var(--u)); }
.p-mision .mi-grid { grid-template-rows: auto auto; flex: 0 0 auto; }
.p-mision .mi-n { min-width: calc(96 * var(--u)); }
.p-mision .mi-texto { font-size: calc(32 * var(--u)); }

/* ===========================================================================
   CLASE 3 v2 · Pasos guiados (instalación, primeros pasos, asistente) y
   preguntas de la práctica
   =========================================================================== */
.gp-enc { flex: 0 0 auto; margin-bottom: calc(28 * var(--u)); }
.gp-progreso { display: flex; gap: calc(10 * var(--u)); margin: calc(12 * var(--u)) 0 calc(14 * var(--u)); }
.gp-progreso i { width: calc(72 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--borde); }
.gp-progreso i.hecho { background: var(--ambar); }
.gp-titulo { font-size: calc(76 * var(--u)); }
.gp-cols { display: grid; grid-template-columns: 62fr 38fr; gap: calc(40 * var(--u)); min-height: 0; }
.gp-izq { display: flex; flex-direction: column; gap: calc(24 * var(--u)); justify-content: center; min-height: 0; }
.gp-der { display: flex; flex-direction: column; gap: calc(16 * var(--u)); justify-content: center; min-height: 0; }
.gp-acciones { margin: 0; padding: 0 0 0 calc(48 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); font-size: calc(38 * var(--u)); line-height: 1.25; }
.gp-acciones li::marker { color: var(--ambar); font-weight: 700; }
.gp-so { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.gp-so-col { padding: calc(20 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.gp-so-col .gp-acciones { font-size: calc(32 * var(--u)); padding-left: calc(40 * var(--u)); gap: calc(10 * var(--u)); }
.gp-escribir { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.gp-prompt { font-size: calc(34 * var(--u)); color: var(--texto); border-color: rgba(56, 189, 248, 0.5); }
.gp-veran, .gp-sino { padding: calc(18 * var(--u)) calc(26 * var(--u)); }
.gp-veran p, .gp-sino p { font-size: calc(32 * var(--u)); line-height: 1.25; margin: calc(8 * var(--u)) 0 0; }
.gp-veran { border-color: rgba(52, 211, 153, 0.45); }
.gp-sino { border-color: rgba(251, 113, 133, 0.35); }
.gp-der .ck-wifi { padding: calc(16 * var(--u)) calc(26 * var(--u)); }
.gp-contador { padding: calc(16 * var(--u)) calc(26 * var(--u)); }
.gp-contador .etiqueta { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); }
.gp-contador .ck-num { font-size: calc(96 * var(--u)); }
.gp-contador.completo .ck-num { color: var(--verde); }
.gp-contador.completo .ck-todas { visibility: visible; }

.pq3-izq { gap: calc(18 * var(--u)); }
.pq3-pregunta { font-size: calc(44 * var(--u)); line-height: 1.3; color: var(--texto); padding: calc(28 * var(--u)) calc(36 * var(--u)); border-color: rgba(56, 189, 248, 0.5); }
.pq3-regla { font-size: calc(32 * var(--u)); margin: 0; }
.pq3-donde { padding: calc(22 * var(--u)) calc(30 * var(--u)); border-color: rgba(52, 211, 153, 0.45); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.pq3-donde p { font-size: calc(36 * var(--u)); line-height: 1.28; margin: 0; }
.pq3-trampa { font-size: calc(36 * var(--u)); }

.re-lista.re-consultas { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }

/* Contador compacto: número y botones en una fila */
.gp-contador { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: calc(24 * var(--u)); row-gap: calc(4 * var(--u)); }
.gp-contador > .etiqueta { flex-basis: 100%; justify-content: center; }
.gp-contador .ck-num { font-size: calc(88 * var(--u)); }
.gp-contador .ck-todas { flex-basis: 100%; text-align: center; min-height: 0; display: none; }
.gp-contador.completo .ck-todas { display: block; }
/* Misión: más compacta para que la nota no toque el reloj */
.p-mision .mi-texto { font-size: calc(30 * var(--u)); }
.p-mision .mi-reglas { margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(28 * var(--u)); }
.p-mision .mi-reglas p { font-size: calc(30 * var(--u)); }
.p-mision .mi-nota { margin-top: calc(10 * var(--u)); }
.p-mision .mi-hito { padding: calc(20 * var(--u)) calc(28 * var(--u)); }