/* ============================================================
   core/typography.css
   Sistema tipográfico global (contenido)
   - base.css: defaults mínimos y seguros
   - typography.css: escala y rich-text SOLO para contenido (main)
   ============================================================ */

/* ------------------------------
   RAÍZ TIPOGRÁFICA
------------------------------ */
html {
  font-size: 16px;
}

/* Base tipográfica global (OK para todo el site) */
body {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  color: var(--neutral-900);
}

/* ------------------------------
   HEADINGS (contenido)
   Importante: acotado a main para no reestilizar header/footer
------------------------------ */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--color-heading);
  margin: 0 0 0.5em;
}
/* ============================================================
   H1 con acento de marca (solo títulos principales de página)
   ============================================================ */
main h1.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}

main h1.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

 width: clamp(120px, 28%, 220px);
  height: 4px;
  border-radius: 999px;

  background: var(--heading-accent);
}


/* Escalas fluidas (contenido) */
main h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
main h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
main h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
main h4 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
main h5 { font-size: 1.1rem; }
main h6 { font-size: 1rem; }

/* ------------------------------
   PÁRRAFOS (contenido)
------------------------------ */
main p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--neutral-800);
  margin: 0 0 1em;
}

/* ------------------------------
   ENLACES (contenido)
   En base.css ya existen globales; aquí afinamos solo en main.
------------------------------ */
main a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

main a:hover {
  color: var(--primary-700);
}

main a:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

/* ------------------------------
   LISTAS (contenido)
   Reset deja list-style:none para UI.
------------------------------ */
main ul,
main ol {
  margin: 0 0 1.2em 1.4em;
  padding: 0;
  color: var(--neutral-800);
}

main ul { list-style: disc; }
main ol { list-style: decimal; }

main li {
  margin-bottom: 0.4em;
}

/* ------------------------------
   ÉNFASIS (contenido)
------------------------------ */
main strong {
  font-weight: 700;
  color: var(--neutral-900);
}

main em {
  font-style: italic;
}

/* ------------------------------
   CITA (contenido)
------------------------------ */
main blockquote {
  border-left: 4px solid var(--primary-300);
  padding: 0.5em 1em;
  margin: 1.5em 0;
  font-style: italic;
  background: var(--neutral-100);
  color: var(--neutral-800);
}

/* ------------------------------
   CÓDIGO (contenido)
------------------------------ */
main code {
  background: var(--neutral-200);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9rem;
}

main pre {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 14px 16px;
  overflow: auto;
  margin: 1.2em 0;
}

main pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.9rem;
}