/* Computación Universal — reset + tipografía base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Salvaguarda: ninguna palabra larga (títulos en español a font-size grande)
   debe poder forzar scroll horizontal de la página. */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  overflow-wrap: break-word;
}

code, pre {
  font-family: var(--font-code);
  font-size: var(--type-code-md-size);
  line-height: var(--type-code-md-lh);
  letter-spacing: var(--type-code-md-ls);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Typography utility classes: size / line-height / letter-spacing per token ----
   Carbon aligera el peso a medida que sube el tamaño (Display 300, Heading 400/600). */
.text-hero-display { font-size: var(--type-hero-display-size); line-height: var(--type-hero-display-lh); letter-spacing: var(--type-hero-display-ls); font-weight: var(--font-weight-light); }
.text-display-lg    { font-size: var(--type-display-lg-size);   line-height: var(--type-display-lg-lh);   letter-spacing: var(--type-display-lg-ls);   font-weight: var(--font-weight-light); }
.text-h1             { font-size: var(--type-h1-size);           line-height: var(--type-h1-lh);           letter-spacing: var(--type-h1-ls);           font-weight: var(--font-weight-light); }
.text-h2             { font-size: var(--type-h2-size);           line-height: var(--type-h2-lh);           letter-spacing: var(--type-h2-ls);           font-weight: var(--font-weight-regular); }
.text-h3             { font-size: var(--type-h3-size);           line-height: var(--type-h3-lh);           letter-spacing: var(--type-h3-ls);           font-weight: var(--font-weight-regular); }
.text-h4             { font-size: var(--type-h4-size);           line-height: var(--type-h4-lh);           letter-spacing: var(--type-h4-ls);           font-weight: var(--font-weight-semibold); }
.text-h5             { font-size: var(--type-h5-size);           line-height: var(--type-h5-lh);           letter-spacing: var(--type-h5-ls);           font-weight: var(--font-weight-semibold); }
.text-subtitle        { font-size: var(--type-subtitle-size);     line-height: var(--type-subtitle-lh);     letter-spacing: var(--type-subtitle-ls);     font-weight: var(--font-weight-regular); }
.text-body-md         { font-size: var(--type-body-md-size);      line-height: var(--type-body-md-lh);      letter-spacing: var(--type-body-md-ls);      font-weight: var(--font-weight-regular); }
.text-body-md-medium  { font-size: var(--type-body-md-size);      line-height: var(--type-body-md-lh);      letter-spacing: var(--type-body-md-ls);      font-weight: var(--font-weight-medium); }
.text-body-sm         { font-size: var(--type-body-sm-size);      line-height: var(--type-body-sm-lh);      letter-spacing: var(--type-body-sm-ls);      font-weight: var(--font-weight-regular); }
.text-body-sm-medium  { font-size: var(--type-body-sm-size);      line-height: var(--type-body-sm-lh);      letter-spacing: var(--type-body-sm-ls);      font-weight: var(--font-weight-medium); }
.text-caption         { font-size: var(--type-caption-size);      line-height: var(--type-caption-lh);      letter-spacing: var(--type-caption-ls);      font-weight: var(--font-weight-regular); }
.text-caption-bold    { font-size: var(--type-caption-size);      line-height: var(--type-caption-lh);      letter-spacing: var(--type-caption-ls);      font-weight: var(--font-weight-semibold); }
.text-micro            { font-size: var(--type-micro-size);        line-height: var(--type-micro-lh);        letter-spacing: var(--type-micro-ls);        font-weight: var(--font-weight-regular); }
.text-micro-uppercase  { font-size: var(--type-micro-uc-size);     line-height: var(--type-micro-uc-lh);     letter-spacing: var(--type-micro-uc-ls);     font-weight: var(--font-weight-semibold); text-transform: uppercase; }

.d-block { display: block; }