/* Tipografia del sistema — fuente unica de verdad.
   Debe cargarse ANTES que el resto de hojas de cada pagina.

   El problema que resuelve: todas las hojas pedian `Inter` como primera
   opcion, pero Inter nunca se cargaba (no habia @font-face ni <link> a
   ninguna fuente). El navegador caia al siguiente candidato del stack, asi
   que el sitio se veia con SF Pro en Mac, Segoe UI en Windows y Roboto en
   Android — tres tipografias distintas para el mismo diseño.

   Peor aun: el diseño usa pesos intermedios (440, 450, 480, 550, 650, 760)
   que solo existen en una fuente variable. Con las fuentes del sistema esos
   valores se redondeaban al peso estatico mas cercano, asi que los titulos
   nunca tuvieron el grosor con el que fueron diseñados.

   Inter se sirve local (assets/fonts) en su version variable 100..900. */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Un solo stack para todo el sitio. Antes vivia duplicado (y distinto) en
     styles.css, mdm-brief.css, mdm-how.css, smart-dev.css y
     connected-panel.css. */
  --font-sans:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Los titulos comparten familia con el cuerpo: la jerarquia la dan el peso
     y el tracking, no una segunda tipografia. */
  --font-display:var(--font-sans);

  /* Tracking por tamaño. La tipografia grande necesita menos espacio entre
     letras que la chica; con estos tokens el ajuste es el mismo en todo el
     sitio en vez de un valor suelto por componente. */
  --track-display:-.047em;   /* 60px+  → hero, titulos de portada */
  --track-title:-.035em;     /* 40-59px → titulos de seccion */
  --track-heading:-.03em;    /* 28-39px → subtitulos */
  --track-body:-.011em;      /* texto corrido */
  --track-eyebrow:.12em;     /* kickers en mayusculas */
}

html{font-family:var(--font-sans)}

body,
button,input,select,textarea,optgroup{
  font-family:var(--font-sans);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Inter trae ligaduras contextuales y numeros proporcionales por defecto;
     las cifras tabulares se piden donde se alinean columnas (precios). */
  font-variant-ligatures:contextual;
}

/* Cifras de ancho fijo donde los numeros se comparan en vertical. */
.price-top h3,
.plans-view .plan-price,
.metric-window,
.metric-line strong{
  font-variant-numeric:tabular-nums;
}