/* =========================================================================
   ESCALA POR TAMAÑO DE PANTALLA
   =========================================================================

   El sistema está diseñado en píxeles para un ancho de 1440 (tokens t-*,
   e-*). En un monitor grande eso deja el contenido en un tercio de la
   pantalla: en un 4K al 110 % el navegador reporta ~3490 px de ancho y la
   página ocupaba 1120, con un titular de 60 px que se lee chico a la
   distancia de un escritorio.

   La solución no es agrandar cada tamaño por separado: `zoom` escala la
   página entera, con las mismas proporciones, así que la jerarquía, los
   espacios y los contrastes medidos siguen siendo los del sistema. Se hace
   por escalones y no en forma continua, para que cada tamaño se pueda revisar.

   Debajo de 1600 px no se toca nada: celular, tablet y notebook usan el
   diseño tal cual, que ya es responsivo.
   ========================================================================= */

@media (min-width: 1600px) { body { zoom: 1.12; } }
@media (min-width: 1920px) { body { zoom: 1.28; } }
@media (min-width: 2240px) { body { zoom: 1.45; } }
@media (min-width: 2560px) { body { zoom: 1.65; } }
@media (min-width: 3000px) { body { zoom: 1.95; } }
@media (min-width: 3400px) { body { zoom: 2.2; } }
@media (min-width: 3800px) { body { zoom: 2.45; } }