/* ==========================================================================
   CODEX — Base
   Reset mínimo, estilos de texto y retícula. Depende de tokens/tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* Los títulos heredan peso y tamaño: sin esto el navegador los pone en negrita (700),
   un peso que no está en los tokens ni se carga. El tamaño lo da la clase t-*. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: var(--font-weight-strong); }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords; /* permite animar a height:auto donde haya soporte */
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--type-xs-label);
  letter-spacing: var(--tracking-xs);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

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

/* ---------- Estilos de texto ----------
   Una clase por talla. Por defecto aplican la variante label (500, el estilo
   original); con .is-paragraph pasan a la variante paragraph (400).
   No combines tamaños sueltos con trackings sueltos: usa estas clases.

   clase          talla     label / paragraph */
.t-meta     { font: var(--type-2xs-label);     letter-spacing: var(--tracking-2xs); }     /*  9px (12 en móvil) */
.t-small    { font: var(--type-xs-label);      letter-spacing: var(--tracking-xs); }      /* 12px */
.t-link     { font: var(--type-sm-label);      letter-spacing: var(--tracking-sm); }      /* 15px */
.t-body     { font: var(--type-md-label);      letter-spacing: var(--tracking-md); }      /* 18px */
.t-title    { font: var(--type-lg-label);      letter-spacing: var(--tracking-lg); }      /* 24px */
.t-headline { font: var(--type-xl-label);      letter-spacing: var(--tracking-xl); }      /* 24 → 36px */
.t-display  { font: var(--type-display-label); letter-spacing: var(--tracking-display); } /* 48 → 120px */

.t-meta.is-paragraph     { font: var(--type-2xs-paragraph); }
.t-small.is-paragraph    { font: var(--type-xs-paragraph); }
.t-link.is-paragraph     { font: var(--type-sm-paragraph); }
.t-body.is-paragraph     { font: var(--type-md-paragraph); }
.t-title.is-paragraph    { font: var(--type-lg-paragraph); }
.t-headline.is-paragraph { font: var(--type-xl-paragraph); }
.t-display.is-paragraph  { font: var(--type-display-paragraph); }

/* Versales para enlaces de apoyo. El contenido se escribe en minúsculas. */
.t-caption { font: var(--type-2xs-caption); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

.is-muted { color: var(--color-text-muted); }
.is-ghost { color: var(--color-text-ghost); }

/* Texto enriquecido que llega del CMS (casos de estudio, descripciones) */
.prose { max-width: var(--measure); line-height: var(--leading-prose); } /* el tamaño lo da la clase t-* */
.prose > * + * { margin-top: var(--prose-flow); }
.prose a { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.prose ul { list-style: none; }
.prose li + li { margin-top: var(--prose-flow-list); }
.prose strong { font-weight: var(--font-weight-strong); }

/* ---------- Retícula ---------- */
.page {
  padding-inline: var(--page-margin);
}
.page--narrow {
  max-width: var(--page-max-narrow);
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}
@media (max-width: 1199.98px) {
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .grid > * { grid-column: 1 / -1 !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}