/* CAMBIO DE MIRADA. · Sistema tipográfico (decisión 053)
   Una sola familia, Urbanist (SIL OFL), con sus pesos reales: sin serifas, sin cursivas y sin negritas
   sintéticas. Se carga antes que el resto de hojas: todas toman de aquí familia, pesos, escala,
   interlineados y espaciados.

   Pesos
   · 600 Titulares: los mensajes 01 y 03 de la portada, los titulares de sección, los de /encaje,
     las páginas legales y la 404.
   · 500 Jerarquía intermedia: el mensaje 02 de la portada, los subtítulos, la navegación, los botones,
     los rótulos y las preguntas del formulario.
   · 400 Lectura: párrafos, listas, campos y precios.

   Excepciones con función editorial que se mantienen: «A medida», a menor cuerpo porque es un bloque
   secundario; nombres de servicio, a 13 px; etapas del método, a 15 px por sus columnas estrechas;
   listas de servicios en móvil, a 15 px; campos del formulario, a 17 px (evita el zum de iOS);
   pies de la portada, a 9–11 px para no cruzarse con la flecha en 320 px. */

:root {
  --font: "Urbanist", "Helvetica Neue", Arial, sans-serif;

  --w-text: 400;
  --w-mid: 500;
  --w-title: 600;

  /* Escala */
  --fs-hero: clamp(40px, 4.3vw, 68px);     /* mensajes de la portada */
  --fs-xl: clamp(40px, 5vw, 74px);         /* titular destacado: «Sobre mí», cierre, /encaje, legales, 404 */
  --fs-h: clamp(32px, 3.5vw, 52px);        /* titular de sección */
  --fs-h3: clamp(28px, 2.9vw, 40px);       /* pasos del formulario */
  --fs-q: clamp(22px, 2vw, 27px);          /* preguntas del formulario */
  --fs-sub: clamp(20px, 1.55vw, 23px);     /* subtítulos: problemas y «qué te llevas» */
  --fs-lead: clamp(16px, 1.3vw, 19px);     /* entradillas */
  --fs-body: 16px;                         /* lectura */
  --fs-small: 14px;                        /* secundario */
  --fs-note: 13px;                         /* notas */
  --fs-label: 11px;                        /* rótulos y botones, en mayúsculas */
  --fs-label-block: 12px;                  /* rótulos de bloque */

  /* Interlineados: Urbanist tiene la x alta, los titulares necesitan algo más de aire que la serifa. */
  --lh-title: 1.08;
  --lh-sub: 1.25;
  --lh-text: 1.6;

  /* Espaciado entre letras */
  --tr-title: -.018em;
  --tr-label: .16em;
  --tr-btn: .18em;
}

@media (max-width: 760px) {
  :root {
    --fs-hero: clamp(30px, 9.4vw, 44px);   /* a 320 px, cada línea de la portada cabe sin partirse */
    --fs-xl: clamp(36px, 10.4vw, 46px);
    --fs-h: clamp(30px, 8.6vw, 38px);
    --fs-sub: 21px;
  }
}

/* Solo pesos reales: el navegador no inventa negritas ni cursivas que la fuente no tiene. */
html { font-synthesis: none; }