/* TIPOGRAFÍA COMÚN DE NINA COSTA. Se carga la última en todas las páginas para que la letra sea la
   misma en todo el sitio. Cada página conserva sus tamaños, colores y composición: aquí solo se
   unifican las familias, las cifras y los detalles de lectura.

   Sin fuentes externas: la política de contenido solo admite recursos propios, y varias hojas
   pedían familias (Inter, IBM Plex, Public Sans, Spectral, JetBrains Mono) que nunca llegaban a
   cargarse y caían cada una en una letra distinta (Arial, Segoe UI, Georgia, Consolas…). Estas
   listas empiezan por esas familias, por si algún día se alojan en el sitio, y siguen con las
   mejores del sistema de cada visitante.

   Las reglas con :where() son valores por defecto: cualquier regla de la página gana sobre ellas. */

:root {
  --nc-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans", Roboto, Arial, sans-serif;
  --nc-serif: "Spectral", "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --nc-mono: "JetBrains Mono", "SF Mono", Consolas, "Cascadia Mono", ui-monospace, "Liberation Mono", Menlo, monospace;
  /* Las hojas de cada página leen estos nombres: al redefinirlos aquí, todas usan la misma letra. */
  --sans: var(--nc-sans);
  --serif: var(--nc-serif);
  --mono: var(--nc-mono);
}

/* Una sola familia de texto en todo el sitio (también en botones y formularios, que no la heredan). */
:root,
body,
button,
input,
select,
textarea,
table {
  font-family: var(--nc-sans);
}

code, pre, kbd, samp {
  font-family: var(--nc-mono);
  font-variant-ligatures: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
}

body {
  font-feature-settings: "kern", "liga", "calt";
}

/* El titular principal de cada página, con la misma letra y el mismo peso en todo el sitio
   (había páginas con serif fina, otras con monoespaciada y otras con palo seco en negrita). */
h1 {
  font-family: var(--nc-sans);
  font-weight: 700;
}

/* Titulares: repartidos de forma equilibrada cuando ocupan varias líneas. */
h1, h2, h3, h4 {
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Algo más juntas las letras de los titulares grandes, salvo que la página ya lo decida. */
:where(h1) { letter-spacing: -0.02em; }
:where(h2) { letter-spacing: -0.014em; }
:where(h3) { letter-spacing: -0.006em; }

/* Texto corrido: sin líneas viudas y sin palabras largas que desborden en el móvil. */
p, li, dd, blockquote, figcaption {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* Cifras del mismo ancho donde se comparan: tablas, precios, fechas y paneles de datos. */
table, th, td, dl, time, output,
[class*="precio"], [class*="price"], [class*="valor"], [class*="value"], [class*="dato"],
[class*="ticker"], [class*="stat"], [class*="metric"], [class*="kpi"], [class*="reading"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Enlaces subrayados: el trazo se separa de la letra y toma el grosor de la fuente. */
a {
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; }

/* El nombre del sitio en la cabecera nunca se parte en dos líneas ni se encoge. */
.wordmark, .marca, .brand {
  white-space: nowrap;
  flex-shrink: 0;
}

/* En el móvil, una tabla suelta (sin caja propia con desplazamiento) se desplaza dentro de sí
   misma en vez de ensanchar toda la página. */
@media (max-width: 640px) {
  main > table, article > table, section > table, body > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media print {
  html { -webkit-font-smoothing: auto; }
}