/* Deck de Fluxing: canvas fijo de 1920×1080. Todo va en px del canvas; deck.js
   lo escala a la ventana con --s. Es el sistema de diseño a ×2: un radio de 14 px
   de la web acá mide 28, y los bordes pasan de 1 a 2 px. */

html, body { margin: 0; height: 100%; }
body { background: var(--bg-000); color: var(--ink); font-family: var(--font-sans); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- canvas ---------- */
.stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center center; }
.slide { position: absolute; inset: 0; display: none; overflow: hidden; background: var(--bg-000); color: var(--ink); }
.slide.active { display: block; }
.slide > .fondo { position: absolute; inset: 0; z-index: 0; }
.pad { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 96px 128px 136px; }
.notes { display: none; }

/* ---------- escala para proyector (piso: 28 px) ---------- */
.slide h1, .slide h2, .slide h3, .slide p, .slide ul, .slide ol { margin: 0; }
.slide h1 { font: 600 96px/104px var(--font-sans); letter-spacing: -0.02em; }
.slide h2 { font: 600 72px/80px var(--font-sans); letter-spacing: -0.02em; }
.slide h3 { font: 600 44px/52px var(--font-sans); letter-spacing: -0.01em; }
.slide p, .slide li { font: 400 40px/56px var(--font-sans); }
.slide strong { font-weight: 600; }
.slide ul, .slide ol { padding: 0; list-style: none; }
.slide code, .slide pre { font: 400 32px/48px var(--font-mono); }
.slide .t-display { font: 600 136px/136px var(--font-sans); letter-spacing: -0.03em; }
.slide .t-lead { font: 400 48px/64px var(--font-sans); color: var(--ink-muted); }
.slide .t-chico { font: 400 32px/44px var(--font-sans); color: var(--ink-muted); }
.slide .t-cifra { font: 600 200px/200px var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.slide .fx-eyebrow { font: 500 28px/32px var(--font-mono); letter-spacing: 0.18em; color: var(--ink-muted); }
.slide .fx-eyebrow.fx-eyebrow-flux { color: var(--flux); }

/* ---------- pie ---------- */
/* nowrap en todo el pie: si una pieza pudiera partirse, el título se apilaría en dos o tres
   líneas antes de que el pie desborde, y verify (pie-desbordado) no se enteraría */
.pie { position: absolute; z-index: 2; left: 128px; right: 128px; bottom: 44px; display: flex; align-items: center; gap: 20px; font: 500 22px/28px var(--font-mono); letter-spacing: 0.04em; color: var(--ink-muted); white-space: nowrap; }
.pie-marca { width: 56px; height: 56px; border-radius: 12px; }
.pie-num { margin-left: auto; font-variant-numeric: tabular-nums; }
/* data-fuente: la fuente del dato, a la derecha y en una sola línea (verify avisa si no entra) */
.pie-fuente { margin-left: auto; white-space: nowrap; }
.pie-fuente + .pie-num { margin-left: 40px; }

/* ---------- logos ---------- */
/* Cada logo va sobre su fondo nativo: el del instituto es multicolor y lleva placa
   blanca siempre; el isotipo de Fluxing es blanco translúcido y lleva placa oscura
   solo en tema claro. */
.logos { display: flex; align-items: center; gap: 40px; }
.logos .sep { flex: none; width: 2px; height: 96px; background: var(--line-300); }
.logo-instituto { display: flex; align-items: center; gap: 24px; }
.logo-instituto img { flex: none; width: 168px; height: auto; padding: 12px; background: #ffffff; border-radius: 20px; }
.logo-fluxing { display: flex; align-items: center; gap: 16px; font: 600 44px/52px var(--font-sans); letter-spacing: -0.01em; }
.logo-fluxing img { flex: none; width: 88px; height: 88px; border-radius: 20px; }
[data-theme="light"] .pie-marca, [data-theme="light"] .logo-fluxing img { background: #0a0f1e; }

/* ---------- fondo de red ---------- */
.fx-net-svg { width: 100%; height: 100%; }
/* Proyectado, el grafo del sistema de diseño (aristas de 1 px en --trace, 1,4:1 contra el
   fondo) desaparece. En el deck las aristas van en --trace-strong y los nodos en
   --line-300, más gruesos. El SVG mide 1280×720 y se dibuja a 1920×1080: 1,5 de trazo
   son 2,25 px del canvas. Los hubs conservan su color de activación. */
.slide .fx-net-edge { stroke: var(--trace-strong); stroke-width: 1.5; }
.slide .fx-net-node:not(.fx-net-hub) { stroke: var(--line-300); stroke-width: 1.5; }
/* ?anim=1 anima aunque el sistema pida menos movimiento: gana sobre la regla del sistema de diseño */
.fx-net-forzar .fx-net-anim { display: inline; }

/* ---------- layouts ---------- */
.l-portada .pad, .l-cierre .pad { justify-content: space-between; padding: 112px 128px 96px; }
.l-portada .titulo, .l-cierre .titulo { display: flex; flex-direction: column; gap: 32px; max-width: 1040px; }
.l-seccion .pad { gap: 32px; }
.l-seccion h1 { max-width: 1400px; }
.l-texto .pad { gap: 56px; }
.l-texto ul, .l-texto ol { max-width: 1500px; }
.l-texto li + li { margin-top: 32px; }

/* Listas con marca (l-texto y columnas): la marca arranca en el borde del título y el
   texto queda indentado. Con ::marker la viñeta colgaba 10 px a la izquierda. */
.l-texto li, .l-comparacion .col li { position: relative; padding-left: 48px; }
.l-texto ul > li::before, .l-comparacion .col ul > li::before { content: ''; position: absolute; left: 0; top: calc(0.5lh - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--flux); }
.l-texto ol, .l-comparacion .col ol { counter-reset: paso; }
.l-texto ol > li, .l-comparacion .col ol > li { counter-increment: paso; padding-left: 64px; }
.l-texto ol > li::before, .l-comparacion .col ol > li::before { content: counter(paso); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 600; color: var(--flux); }

/* ---------- l-cita: una frase sola, un reporte o una cita ---------- */
.l-cita .pad { gap: 40px; }
.l-cita .frase { max-width: 1500px; font: 600 88px/104px var(--font-sans); letter-spacing: -0.02em; }
.l-cita .reporte { max-width: 1500px; margin: 0; padding: 56px 64px; border: 2px solid var(--line-300); border-left: 8px solid var(--flux); border-radius: 28px; background: var(--bg-200); }
.l-cita .reporte figcaption { margin-bottom: 24px; }
.l-cita .reporte p { font: 500 64px/80px var(--font-sans); letter-spacing: -0.01em; }
.l-cita blockquote { margin: 0; max-width: 1560px; display: flex; flex-direction: column; gap: 40px; }
.l-cita .original { font: 600 72px/88px var(--font-sans); letter-spacing: -0.02em; }
.l-cita .traduccion { font: 400 44px/60px var(--font-sans); color: var(--ink-muted); }
.l-cita blockquote footer { font: 500 32px/44px var(--font-sans); color: var(--ink-muted); }

/* ---------- l-cifra: un número grande ---------- */
.l-cifra .pad { gap: 24px; }
.l-cifra .t-cifra { font-size: 320px; line-height: 320px; color: var(--flux); }
.l-cifra .t-lead { max-width: 1400px; font: 500 56px/72px var(--font-sans); color: var(--ink); }

/* ---------- l-fluxing: quién habla ---------- */
.l-fluxing .pad { gap: 48px; }
.l-fluxing .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.slide .cifras li { display: flex; flex-direction: column; gap: 8px; font: 400 36px/48px var(--font-sans); color: var(--ink-muted); }
.l-fluxing .cifras strong { font: 600 136px/136px var(--font-sans); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.l-fluxing .marca { display: flex; align-items: center; gap: 24px; padding-top: 40px; border-top: 2px solid var(--line-300); }
.l-fluxing .marca img { flex: none; width: 88px; height: 88px; border-radius: 20px; }
.slide .marca p { font: 400 36px/48px var(--font-sans); color: var(--ink-muted); }
.l-fluxing .marca strong { color: var(--ink); }
[data-theme="light"] .l-fluxing .marca img { background: #0a0f1e; }

/* ---------- l-linea: línea de tiempo de 2021 a 2026 ---------- */
/* Cada año es un punto y el tramo que lo une con el siguiente. Los años .on van en flux,
   y también el tramo entre dos años activos seguidos. */
.l-linea .pad { justify-content: flex-start; gap: 40px; padding-top: 120px; }
.slide .linea { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; }
/* margin y padding en cero: dentro de una l-texto (como en la carta de ajuste) no hereda la sangría ni el margen de las listas */
.slide .linea li { position: relative; margin: 0; padding: 48px 0 0; font: 500 32px/40px var(--font-mono); color: var(--ink-muted); }
.slide .linea li::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line-300); }
.slide .linea li:last-child::before { right: auto; width: 20px; }
.slide .linea li::after { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--line-300); border-radius: 50%; background: var(--bg-000); }
.slide .linea li.on { color: var(--flux); }
.slide .linea li.on::after { border-color: var(--flux); background: var(--flux); }
.slide .linea li.on:has(+ li.on)::before { top: 12px; height: 4px; background: var(--flux); }
.l-linea .hitos { display: grid; gap: 16px; max-width: 1560px; }
.slide .hitos li { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; font: 400 40px/56px var(--font-sans); }
.hitos .fecha { font: 500 32px/56px var(--font-mono); color: var(--ink-muted); }

/* ---------- l-comparacion: columnas o tabla ---------- */
.l-comparacion .pad { gap: 48px; }
.columnas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 40px; }
.columnas.grilla { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.col { display: flex; flex-direction: column; gap: 20px; padding: 40px 44px; border: 2px solid var(--line-300); border-radius: 28px; background: var(--bg-200); }
.slide .col h3 { font: 600 44px/52px var(--font-sans); }
.slide .col p, .slide .col li { font: 400 36px/48px var(--font-sans); }
.l-comparacion .col li + li { margin-top: 16px; }
.slide .nota { font: 500 28px/36px var(--font-mono); color: var(--ink-muted); }
.cifras-linea { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; }
.slide .cifras-linea li { font: 400 32px/44px var(--font-sans); color: var(--ink-muted); }
.cifras-linea strong { display: block; font: 600 48px/56px var(--font-sans); color: var(--ink); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 20px 32px 20px 0; text-align: left; vertical-align: top; border-bottom: 2px solid var(--line-300); font: 400 36px/48px var(--font-sans); }
.tabla thead th { font: 500 28px/36px var(--font-mono); color: var(--ink-muted); }
.tabla tbody th { font-weight: 600; }

/* ---------- l-flujo: diagrama de flujo (los conectores los dibuja flujo.js) ---------- */
.l-flujo .pad { gap: 56px; }
.slide .fx-flow { padding: 16px 0; }
/* grid-auto-flow explícito: el sistema de diseño apila el diagrama con @media (max-width: 1023px),
   que mira la ventana y no el canvas; en un proyector de 800×600 quedaría en una sola columna */
.slide .fx-flow-cols { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 80px; align-items: center; }
/* sin la grilla "auto 1fr" del sistema de diseño, que deja un hueco debajo de los nodos y los descentra */
.slide .fx-flow-col { display: flex; flex-direction: column; justify-content: center; }
.slide .fx-flow-nodes { gap: 64px; }
.slide .fx-flow.filas .fx-flow-cols { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 112px; }
.slide .fx-node { height: auto; min-height: 112px; padding: 24px 32px; justify-content: center; text-align: center; white-space: normal; border: 2px solid var(--line-300); border-radius: 24px; font: 500 32px/42px var(--font-sans); }
.slide .fx-node-active { border-color: var(--flux); box-shadow: var(--glow-flux); }
.slide .fx-node-sub { margin-top: 8px; font: 400 28px/36px var(--font-sans); color: var(--ink-muted); }
.slide .fx-wire { stroke-width: 3; stroke-dasharray: 4 12; }

/* ---------- l-codigo: un fragmento de código y su lectura ---------- */
.l-codigo .pad { gap: 48px; }
.l-codigo .partes { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: start; }
.slide .codigo { margin: 0; padding: 36px 40px; border: 2px solid var(--line-300); border-radius: 24px; background: var(--bg-200); font: 400 30px/44px var(--font-mono); white-space: pre; }
.slide .codigo code { font: inherit; }
/* --flux-soft daba 1,03:1 contra la caja (1,12:1 en claro) y el proyector lo lava: fondo con
   30% de flux (≥ 1,5:1 en los dos temas) y una barra de activación a la izquierda */
.codigo mark { background: color-mix(in srgb, var(--flux) 30%, var(--bg-200)); color: var(--ink); box-shadow: inset 6px 0 0 var(--flux); border-radius: 6px; }
.l-codigo .lectura { display: flex; flex-direction: column; gap: 32px; }
.l-codigo .conclusion { padding-top: 32px; border-top: 2px solid var(--line-300); font-weight: 500; }

/* ---------- l-demo: la terminal ---------- */
/* Oscura en los dos temas: data-theme="dark" en el propio elemento le da los tokens
   oscuros aunque la página esté en claro. */
.l-demo .pad { gap: 40px; }
.terminal { overflow: hidden; border: 2px solid var(--line-300); border-radius: 24px; background: var(--bg-000); color: var(--ink); }
.terminal-barra { display: flex; gap: 14px; padding: 20px 28px; border-bottom: 2px solid var(--line-200); background: var(--bg-100); }
.terminal-barra span { width: 18px; height: 18px; border-radius: 50%; background: var(--line-300); }
.slide .terminal pre { margin: 0; padding: 40px 48px; font: 400 44px/64px var(--font-mono); color: var(--ink); white-space: pre-wrap; }
.terminal .prompt { color: var(--flux); }

/* ---------- l-imagen: una captura con su epígrafe ---------- */
.l-imagen .pad { gap: 40px; }
.imagen { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* border-box: los 600 px de alto máximo incluyen el borde */
.imagen img { display: block; box-sizing: border-box; max-width: 100%; max-height: 600px; width: auto; height: auto; border: 2px solid var(--line-300); border-radius: 24px; }
.slide .imagen figcaption { font: 400 32px/44px var(--font-sans); color: var(--ink-muted); }

/* ---------- l-video: fuera del recorrido; V entra y sale, espacio reproduce ---------- */
.l-video { background: #000; }
.l-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
body.print .slide.l-video { display: none; }

/* ---------- impresión (?print=1): slides apiladas, sin escala ---------- */
@page { size: 1920px 1080px; margin: 0; }
body.print { height: auto; overflow: visible; }
body.print .stage { position: static; width: 1920px; height: auto; transform: none; }
body.print .slide { position: relative; display: block; width: 1920px; height: 1080px; break-after: page; }