/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA ÚNICA DEL SISTEMA PAMEX — Montserrat.
   Decisión de dirección (Ise, 2026-08-16): una sola familia en TODO,
   interno y público.

   Este archivo es EL lugar donde se cambia la tipografía del sistema.
   Si mañana Ise quiere otra fuente u otros tamaños, se toca AQUÍ —
   no en 79 pantallas.

   Cómo usarlo en una pantalla:
       <link rel="stylesheet" href="/_tipografia.css">
   ...y en el CSS de la pantalla, escribir  font-family: var(--pmx-font)
   en vez de repetir la lista de fuentes.

   JERARQUÍA (la misma en todas las pantallas):
     · Títulos de pantalla / héroes ........ 800 (900 solo para números
                                              gigantes: totales, precios estrella)
     · Títulos de sección y botones ........ 700
     · Subtítulos y etiquetas .............. 600
     · Cuerpo y datos ...................... 400
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root{
  /* El fallback importa: mientras baja Montserrat, la pantalla se ve con la
     fuente del sistema y no con Times. `display=swap` hace el cambio solo. */
  --pmx-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --pmx-w-hero:   900;
  --pmx-w-titulo: 800;
  --pmx-w-seccion:700;
  --pmx-w-etiq:   600;
  --pmx-w-cuerpo: 400;
}

/* Base. Las pantallas que definen su propio font-family en body lo pisan;
   por eso el barrido cambió esos `font-family` por var(--pmx-font). */
html, body{
  font-family: var(--pmx-font);
  font-weight: var(--pmx-w-cuerpo);
}

/* Los controles NO heredan la fuente por sí solos: si no se les dice,
   un <select> o un <input> se queda con la fuente del navegador y la
   pantalla se ve remendada. */
button, input, select, textarea, optgroup{ font-family: var(--pmx-font); }

h1{ font-weight: var(--pmx-w-titulo) }
h2, h3{ font-weight: var(--pmx-w-seccion) }
h4, h5, h6, th, label, legend{ font-weight: var(--pmx-w-etiq) }

/* Montserrat es más ancha que la fuente del sistema. En tablas densas
   (corte, rastreo, bandeja) eso aprieta las columnas: se compensa con
   un pelo menos de tracking, sin bajar el tamaño de letra. */
table{ letter-spacing: -0.1px }

/* Los números que se comparan en columna deben alinearse: sin esto, un
   $1,000 y un $159 no cuadran a la vista y las cifras se leen mal. */
td, th, .pmx-num{ font-variant-numeric: tabular-nums }
