/*
 * Tipografía base — Empresa XXI
 * Referencia: design-reference/propuesta4/index.html
 *
 * Archivo (sans) para interfaz, kickers y navegación.
 * Source Serif 4 para titulares editoriales y cuerpo de artículo.
 */

body {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: var(--weight-medium);   /* 500: el 400 se ve demasiado fino */
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titulares: serif, peso fuerte, interlineado corto */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

h1 { font-size: var(--size-5xl); }
h2 { font-size: var(--size-3xl); }
h3 { font-size: var(--size-2xl); }
h4 { font-size: var(--size-xl); }
h5 { font-size: var(--size-lg); }
h6 { font-size: var(--size-base); }

a { color: inherit; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent); }

strong, b { font-weight: var(--weight-bold); }

/* Kicker / eyebrow: mayúsculas con tracking abierto, el recurso más repetido del diseño */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Metadatos: fecha, firma, pie de foto. Nunca para texto de contenido. */
.meta {
  font-size: var(--size-xs);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ *
 * Contenido editorial — el cuerpo del artículo escrito en Gutenberg.
 * Se aplica a .entry-content, donde vuelcan los bloques.
 * ------------------------------------------------------------------ */

.entry-content {
  font-family: var(--font-serif);
  font-size: var(--size-lg);
  font-weight: 400;
  line-height: var(--leading-loose);
}

.entry-content > * + * { margin-top: var(--space-5); }

.entry-content h2 { font-size: var(--size-3xl); margin-top: var(--space-10); }
.entry-content h3 { font-size: var(--size-2xl); margin-top: var(--space-8); }

.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Recupera los bullets que el reset quita: aquí el contenido lo escribe un redactor */
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-6);
  list-style: revert;
}

.entry-content li + li { margin-top: var(--space-2); }

.entry-content blockquote {
  border-left: var(--border-width-strong) solid var(--color-accent);
  padding-left: var(--space-4);
  font-style: italic;
}

.entry-content figcaption {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Enlace de salto al contenido (accesibilidad) */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: var(--z-modal);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-text-on-dark);
}