/* ============================================================
   MZ — Design System · BASE
   Reset mínimo, valores por defecto de elemento y primitivas
   tipográficas. Depende de tokens.css.
   ============================================================ */

*{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100% }

body{
  margin: 0;
  background: var(--c-paper);
  color: var(--c-text);
  font: var(--w-light) var(--t-base)/var(--lh-base) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img{ display: block; max-width: 100%; height: auto }
a{ color: inherit; text-decoration: none }

button{
  font: inherit; color: inherit; background: none;
  border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: left;
}

/* foco visible y coherente en todo el sistema */
:focus-visible{
  outline: var(--bw) solid var(--c-rule);
  outline-offset: 3px;
}

h1,h2,h3,h4{ font-weight: var(--w-light); margin: 0 }
ul{ margin: 0; padding: 0; list-style: none }


/* ------------------------------------------------------------
   PRIMITIVA · .lbl — la capa utilitaria
   Todo lo que no es texto de lectura (navegación, pies,
   numeración, encabezados de sección) usa esta clase.
   Es lo que le da al sitio su carácter de catálogo.
   ------------------------------------------------------------ */
.lbl{
  font-size: var(--t-label);
  line-height: var(--lh-label);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
}


/* ------------------------------------------------------------
   PRIMITIVA · texto de lectura
   ------------------------------------------------------------ */

/* entrada: la primera frase de una sección, en cuerpo mayor */
.lead{
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  font-weight: var(--w-light);
  max-width: var(--measure-lead);
  margin: 0 0 1.5em;
}

/* texto corrido */
.prose p{
  margin: 0 0 1.3em;
  color: var(--c-text-body);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  max-width: var(--measure-prose);
}
.prose p:last-child{ margin-bottom: 0 }
.prose em{ font-style: italic }   /* reservado a títulos de obra citados */

/* variante angosta, para la columna secundaria de la ficha */
.prose--aside p{ max-width: var(--measure-aside) }

/* variante de la bio: un solo cuerpo, intermedio, y sin tope de medida
   — ocupa todo el ancho de su columna. Se banca porque el texto es
   corto; para un texto largo, 85 caracteres por línea sería demasiado. */
.prose--bio p{
  font-size: var(--t-bio);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  color: var(--c-text);
  max-width: none;
  margin-bottom: 1em;
}


/* ------------------------------------------------------------
   PRIMITIVA · separaciones
   Dos pesos de línea, y sólo dos:
   .rule      divide regiones     (tinta, estructural)
   .rule-soft divide filas        (filete, interno)
   ------------------------------------------------------------ */
.rule      { border-color: var(--c-rule) }
.rule-soft { border-color: var(--c-rule-soft) }