/* Estilo Matriz para la presentación (29 de octubre de 2026). construye_presentacion.py la carga después de
   presentacion.css cuando presentacion.json lleva «"estilo": "matriz"», y marca <html data-estilo="matriz">. Cambia el
   aspecto, no el funcionamiento: papel con una retícula de puntos, superficies planas con filete, el avance en puntos,
   los rótulos en JetBrains Mono y las curvas y duraciones de base/movimiento.md (Emil Kowalski). Las figuras de puntos
   («visual»: {"puntos": …}) las arma puntos.js. */

@font-face { font-family: "JetBrains Mono"; src: url("fuentes/jetbrains-mono-latin-400-normal.woff2?v=3ae62151") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fuentes/jetbrains-mono-latin-500-normal.woff2?v=35c2a72b") format("woff2"); font-weight: 500; font-display: swap; }

html[data-estilo="matriz"] {
  --papel: #f7f6f2; --papel-2: #ecebe5; --reticula: #dcd8ce;
  --pizarra: var(--tinta); --coral: var(--acento); --coral-suave: color-mix(in srgb, var(--acento) 22%, var(--papel-claro));
  --resaltador: color-mix(in srgb, var(--acento) 30%, var(--papel-claro)); --resaltador-suave: color-mix(in srgb, var(--acento) 16%, var(--papel-claro));
  --grano: none; --sombra: none; --radio: 10px; --radio-chico: 8px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* base/movimiento.md: ease-out fuerte para entrar y la interfaz por debajo de 300 ms */
  --curva: cubic-bezier(0.23, 1, 0.32, 1); --curva-mueve: cubic-bezier(0.77, 0, 0.175, 1); --d1: 160ms; --d2: 240ms; --d3: 280ms;
}
html[data-estilo="matriz"] body { background: radial-gradient(circle, var(--reticula) 1.1px, transparent 1.4px) 0 0 / 18px 18px, var(--papel); }

/* rótulos en monoespaciada */
html[data-estilo="matriz"] :is(.antetitulo, .meta, .paso-numero, .cuenta-boton, .fuente, .instruccion, .eje) { font-family: var(--mono); font-weight: 500; letter-spacing: .01em; }
html[data-estilo="matriz"] .antetitulo { color: var(--acento-tinta); }

/* superficies planas: papel claro y un filete, sin sombras ni giros */
html[data-estilo="matriz"] :is(.item-lista, .paso, .columna, .celda, .etapa, .acordeon-item, .cara, .ajustes) { box-shadow: none; border: 1px solid var(--regla); }
html[data-estilo="matriz"] .destacado { transform: none; box-shadow: none; background: radial-gradient(circle, var(--acento) 2.4px, transparent 2.9px) 6px 4px / 8px 9px repeat-y, var(--papel-claro);
  padding-left: 30px; border: 1px solid var(--regla); }
html[data-estilo="matriz"] .insignia { background: transparent; border: 2px dotted var(--acento); }
html[data-estilo="matriz"] .conclusion { background: transparent; border: 1.5px dotted var(--tinta-2); }
html[data-estilo="matriz"] .instruccion { background: transparent; border: 1.5px dotted var(--regla); }

/* el avance: un punto por pantalla; el actual, en el acento y más grande */
html[data-estilo="matriz"] .segmentos { gap: 8px; justify-content: center; }
html[data-estilo="matriz"] .segmentos i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--reticula);
  transition: background-color var(--d2) var(--curva), transform var(--d2) var(--curva); }
html[data-estilo="matriz"] .segmentos i.hecho { background: var(--tinta); }
html[data-estilo="matriz"] .segmentos i.actual { background: var(--acento); transform: scale(1.5); }

/* los signos de la suma, en tinta: el acento claro no llega a 3:1 sobre el papel */
html[data-estilo="matriz"] .terminos .operador { font-family: var(--mono); font-style: normal; font-weight: 500; font-size: 1.75rem; color: var(--tinta-2); }

/* botones: planos; al presionarlos se achican a 0,97 en 160 ms */
html[data-estilo="matriz"] .boton { transition: transform var(--d1) var(--curva), background-color var(--d1) ease; }
@media (hover: hover) and (pointer: fine) {
  html[data-estilo="matriz"] .boton:hover { background: #2c2a27; }
  html[data-estilo="matriz"] .boton.secundario:hover { background: var(--papel-2); }
}

/* la figura de puntos ocupa la mitad visual de la pantalla, sobre la misma retícula */
html[data-estilo="matriz"] .visual.con-puntos { background: transparent; }
html[data-estilo="matriz"] .visual.con-puntos .lienzo-puntos { position: absolute; inset: 6%; width: 88%; height: 88%; display: block; }

/* las pantallas entran con un desplazamiento corto; con movimiento reducido, solo fundido */
html[data-estilo="matriz"] .entra-adelante .anima, html[data-estilo="matriz"] .entra-atras .anima { animation-delay: calc(var(--i, 0) * 50ms + 40ms); }
@keyframes entraAdelante { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes entraAtras { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-estilo="matriz"] .segmentos i.actual { transform: none; }
}