/* El siguiente libro: el mundo de la moviola. Negro de mesa, naranja de cinta y ventanas blancas. */
@font-face {
	font-family: "Saira";
	src: url("../fuentes/saira.woff2") format("woff2");
	font-weight: 400 900;
	font-stretch: 55% 100%;
	font-display: swap;
}
/* Letra de respaldo mientras llega Saira: Arial (o Roboto en Android) encogida en cada tramo de estrechez hasta
   ocupar lo mismo que Saira, con su misma altura de línea. Así, cuando Saira sustituye a la de respaldo, los títulos
   no cambian de número de líneas y la página no salta. Las proporciones están medidas (Tema/calibrar-respaldo). */
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 50% 60%; size-adjust: 67.5%; ascent-override: 168.1%; descent-override: 65.0%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 50% 60%; size-adjust: 67.5%; ascent-override: 168.1%; descent-override: 65.0%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 60.1% 63.5%; size-adjust: 71.7%; ascent-override: 158.3%; descent-override: 61.2%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 60.1% 63.5%; size-adjust: 71.7%; ascent-override: 158.3%; descent-override: 61.2%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 63.6% 67.5%; size-adjust: 74.8%; ascent-override: 151.7%; descent-override: 58.7%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 63.6% 67.5%; size-adjust: 74.8%; ascent-override: 151.7%; descent-override: 58.7%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 67.6% 72.5%; size-adjust: 80.0%; ascent-override: 141.9%; descent-override: 54.9%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 67.6% 72.5%; size-adjust: 80.0%; ascent-override: 141.9%; descent-override: 54.9%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 72.6% 76.5%; size-adjust: 85.2%; ascent-override: 133.2%; descent-override: 51.5%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 72.6% 76.5%; size-adjust: 85.2%; ascent-override: 133.2%; descent-override: 51.5%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 76.6% 79%; size-adjust: 89.0%; ascent-override: 127.5%; descent-override: 49.3%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 76.6% 79%; size-adjust: 89.0%; ascent-override: 127.5%; descent-override: 49.3%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 79.1% 82.5%; size-adjust: 91.5%; ascent-override: 124.0%; descent-override: 48.0%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 79.1% 82.5%; size-adjust: 91.5%; ascent-override: 124.0%; descent-override: 48.0%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; font-stretch: 82.6% 100%; size-adjust: 96.5%; ascent-override: 117.6%; descent-override: 45.5%; line-gap-override: 0%; }
@font-face { font-family: "Saira respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 1000; font-stretch: 82.6% 100%; size-adjust: 96.5%; ascent-override: 117.6%; descent-override: 45.5%; line-gap-override: 0%; }

:root {
	/* Materiales */
	--tinta: #0b0b0b;          /* la mesa */
	--carbon: #1a1a1a;         /* el raíl */
	--bobina: #2e2e2e;         /* reglas sobre negro */
	--naranja: #ff6a13;        /* la cinta y el campo */
	--naranja-vivo: #ff8442;   /* foco y paso del ratón sobre negro */
	--naranja-hondo: #c94c05;  /* pliegue de la banderita */
	--blanco: #ffffff;         /* ventanas perforadas */
	--blanco-borde: #f2f2f2;
	--sobre-negro: #ece4dd;    /* texto secundario sobre negro, teñido */
	--sobre-blanco: #3b3430;   /* texto secundario sobre blanco, teñido */
	--grasa: #f4f1ea;          /* el aspa de lápiz graso */

	/* Tipos */
	--marco: "Saira", "Saira respaldo", sans-serif;
	--lectura: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;

	/* Escala: el rango lo da cuántas casillas ocupa algo, no el tamaño */
	--t-rotulo: 0.875rem;      /* 14 px, mayúsculas espaciadas: nada menor en el móvil */
	--t-pequeno: 0.9375rem;    /* 15 px */
	--t-cuerpo: 1.125rem;      /* 18 px: lectores de todas las edades */
	--t-titulo-libro: 1.375rem;
	--t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	--t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);

	/* Ritmo: un paso de perforación */
	--paso: 22px;
	--e-1: 0.5rem;
	--e-2: 1rem;
	--e-3: 1.5rem;
	--e-4: 2.5rem;
	--e-5: 4rem;
	--gutter: 16px;
	--ancho: 1200px;
	--medida: 66ch;

	/* Movimiento */
	--sale: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
	:root { --gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --sale: linear; }
}