/*
  Tipografía base.

  Figma exporta TODOS los nodos de texto con line-height "normal" (auto), no con
  un valor numérico — el token "lineHeight: 100" del System es la definición del
  estilo, pero los textos reales usan auto. Por eso --lh-base es `normal`.

  IMPORTANTE (arquitectura de color): los encabezados y párrafos heredan el color
  (`color: inherit`) en vez de fijar negro. Fijar un color aquí ganaba por
  especificidad sobre la herencia y obligaba a repetir `color` en cada regla
  hija; ese era el origen de una familia entera de bugs de "texto negro" dentro
  de contenedores de color. El color por defecto lo define `body`.
*/

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  max-width: 100%;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  /* text-transform: uppercase; */
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  /* text-transform: uppercase; */
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}


h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  /* text-transform: uppercase; */
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

.body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  color: inherit;
  line-height: 1;
  margin: 0;
}

ul, ol, li { color: inherit; line-height: var(--lh-base); }
a { color: inherit; }

.body-bold      { font-family: var(--font-body); font-size: var(--fs-body-bold);     font-weight: var(--fw-bold); }
.body-lg        { font-family: var(--font-body); font-size: var(--fs-body-lg);       font-weight: var(--fw-regular); }
.body-lg-bold   { font-family: var(--font-body); font-size: var(--fs-body-lg-bold);  font-weight: var(--fw-bold); }
.small          { font-family: var(--font-body); font-size: var(--fs-small);         font-weight: var(--fw-regular); }
.small-bold     { font-family: var(--font-body); font-size: var(--fs-small-bold);    font-weight: var(--fw-bold); }

/* ==========================================================================
   RED DE SEGURIDAD ANTE PALABRAS LARGAS

   `overflow-wrap: break-word` NO afecta al texto que ya cabe: solo actua
   cuando una palabra sola es mas ancha que su contenedor. Sin esto, una
   palabra larga (p. ej. "ESTABLECIMIENTOS") desbordaba su caja y el
   `overflow-x: clip` de la raiz la cortaba en seco, sin aviso.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
p, li, a, td, th, button, label, span, figcaption {
  overflow-wrap: break-word;
}