/*
 * motor-presentaciones: base sin marca.
 * Lámina de referencia de 1920×1080 px, escalada a la ventana por motor.js (transform: scale) con
 * letterbox. El color entra por roles de lámina (--lamina-*), que leen los --motor-* con la guarda
 * de contraste de _motor/marca.css; si esa hoja falta, caen a los --marca-* o a un neutro. La
 * escala tipográfica (40 × 1.25ⁿ) y el módulo de espaciado (40 px) son tokens.
 */

:root {
  --motor-fondo-exterior: #000;

  /* Módulo y retícula: todo espacio es múltiplo de 40 px o su mitad. */
  --motor-modulo: 40px;
  --motor-espacio-1: 20px;
  --motor-espacio-2: 40px;
  --motor-espacio-3: 80px;
  --motor-espacio-4: 120px;
  --motor-margen-x: 160px;
  --motor-margen-y: 120px;

  /* Escala tipográfica: 40 × 1.25ⁿ, redondeada a entero. */
  --motor-texto-pie: 32px; /* n = −1: piso de la lámina */
  --motor-texto-secundario: 40px; /* n = 0 */
  --motor-texto-cuerpo: 50px; /* n = 1 */
  --motor-texto-subtitulo: 62px; /* n = 2: h3 */
  --motor-texto-titulo: 78px; /* n = 3: h2 */
  --motor-texto-portada: 122px; /* n = 5: h1 */
  --motor-texto-display: 152px; /* n = 6 */
  --motor-texto-cifra: 372px; /* n = 10 */

  --motor-titulo-tracking: -0.015em;
}

html.motor,
html.motor body {
  margin: 0;
  height: 100%;
}

html.motor body {
  overflow: hidden;
  background: var(--motor-fondo-exterior);
}

.escenario {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--escala, 1));
  transform-origin: 50% 50%;
  background: var(--marca-superficie, #fff);
}

.lamina {
  /* Roles de color de la lámina: los leen los títulos, el cuerpo, .suave y .acento. */
  --lamina-fondo: var(--marca-superficie, #fff);
  --lamina-tinta: var(--motor-tinta, var(--marca-tinta, #1a1a1a));
  --lamina-titulo: var(--motor-titulo, var(--marca-primario, #1a1a1a));
  --lamina-suave: var(--motor-suave, var(--marca-tinta-suave, #5a5a5a));
  --lamina-acento: var(--motor-acento-texto, var(--marca-acento, #5a5a5a));
  --lamina-acento-relleno: var(--motor-acento-relleno, var(--marca-acento, #5a5a5a));

  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  visibility: hidden;
  background: var(--lamina-fondo);
  color: var(--lamina-tinta);
  font-family: "marca-cuerpo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Sin negritas ni cursivas sintéticas: la marca usa sus caras o ninguna. */
  font-synthesis: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Lámina de color: fondo primario y todos los roles cambiados a la vez. */
.lamina.de-color {
  --lamina-fondo: var(--marca-primario, #1a1a1a);
  --lamina-tinta: var(--motor-sobre-primario, var(--marca-superficie, #fff));
  --lamina-titulo: var(--motor-sobre-primario, var(--marca-superficie, #fff));
  --lamina-suave: var(
    --motor-suave-sobre-primario,
    color-mix(in oklab, var(--marca-superficie, #fff) 80%, var(--marca-primario, #1a1a1a))
  );
  --lamina-acento: var(--motor-acento-sobre-primario, var(--marca-superficie, #fff));
  --lamina-acento-relleno: var(--motor-acento-sobre-primario, var(--marca-superficie, #fff));
}

.lamina.activa {
  visibility: visible;
}

/* Notas del orador: nunca se ven, ni en proyección ni en PNG ni en PDF. */
.nota {
  display: none !important;
}

/* Tipografía de partida, con especificidad cero para que cualquier regla del deck la pise. */
:where(.lamina) {
  padding: var(--motor-margen-y) var(--motor-margen-x);
  font-size: var(--motor-texto-cuerpo);
  line-height: 1.3;
  text-wrap: pretty;
}

/* Recorte de interlineado: el hueco que se ve entre bloques es el que declara el CSS. Dos
   excepciones las pone el deck: un li con barra lateral va sin recorte (recortada, la barra mide
   sólo la altura de mayúscula), y tras un display con descendentes el bloque siguiente va a dos
   módulos, porque el recorte cuenta el hueco desde la línea base. */
:where(.lamina) :where(h1, h2, h3, p, li) {
  text-box: trim-both cap alphabetic;
}

:where(.lamina) :where(h1, h2, h3) {
  margin: 0;
  font-family: "marca-titulo", "marca-cuerpo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--lamina-titulo);
  line-height: 1.15;
  letter-spacing: var(--motor-titulo-tracking);
  text-wrap: balance;
}

:where(.lamina) :where(h1) {
  font-size: var(--motor-texto-portada);
  font-weight: 700;
}

:where(.lamina) :where(h2) {
  font-size: var(--motor-texto-titulo);
  font-weight: 700;
}

:where(.lamina) :where(h3) {
  font-size: var(--motor-texto-subtitulo);
  font-weight: 600;
}

:where(.lamina) :where(p, ul, ol) {
  margin: 0;
}

:where(.lamina) :where(ul, ol) {
  padding-left: 1.2em;
}

:where(.lamina) :where(li + li) {
  margin-top: var(--motor-espacio-2);
}

:where(.lamina) :where(.acento) {
  color: var(--lamina-acento);
}

:where(.lamina) :where(.suave) {
  color: var(--lamina-suave);
}

/* Modo impresión (?modo=impresion): todas las láminas apiladas, una por página. */
@page {
  size: 1920px 1080px;
  margin: 0;
}

html.modo-impresion,
html.modo-impresion body {
  height: auto;
  overflow: visible;
  background: none;
}

html.modo-impresion .escenario {
  position: static;
  width: 1920px;
  height: auto;
  overflow: visible;
  transform: none;
  background: none;
}

html.modo-impresion .lamina {
  position: relative;
  inset: auto;
  visibility: visible;
  break-after: page;
}

html.modo-impresion .lamina:last-of-type {
  break-after: auto;
}