/**
 * 02-typography.css
 *
 * Decisión: Las clases tipográficas son independientes del elemento HTML.
 * .text-display puede ser un h1 o un p, según el contexto semántico.
 * Esto da flexibilidad sin romper accesibilidad.
 */

/* ── Clases de tamaño ────────────────────────────────────────────────────────── */
.text-display {
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.text-h1 {
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-h1);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.text-h2 {
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-h2);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.text-h3 {
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.text-h4 {
  font-family: var(--ic-font-sans);
  font-size: var(--ic-text-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.text-body-lg {
  font-size: var(--ic-text-body-lg);
  line-height: 1.70;
}

.text-body {
  font-size: var(--ic-text-body);
  line-height: 1.65;
}

.text-sm {
  font-size: var(--ic-text-sm);
  line-height: 1.55;
}

.text-xs {
  font-size: var(--ic-text-xs);
  line-height: 1.50;
  letter-spacing: 0.02em;
}

/* ── Pesos ───────────────────────────────────────────────────────────────────── */
.font-light   { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

/* ── Colores de texto ────────────────────────────────────────────────────────── */
.text-primary   { color: var(--ic-text-primary); }
.text-secondary { color: var(--ic-text-secondary); }
.text-muted     { color: var(--ic-text-muted); }
.text-accent    { color: var(--ic-accent); }
.text-dark      { color: var(--ic-text-dark); }

/* ── Alineación ──────────────────────────────────────────────────────────────── */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ── Eyebrow (texto pequeño decorativo sobre títulos) ────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--ic-font-sans);
  font-size: var(--ic-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-accent);
}

/* ── Gradient text (efecto premium en títulos) ───────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-red {
  background: linear-gradient(135deg, var(--ic-accent) 0%, #ff4060 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Énfasis y decoraciones ──────────────────────────────────────────────────── */
em {
  font-style: italic;
}

strong {
  font-weight: 600;
}

/* Línea decorativa bajo sección de headings */
.section-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--ic-accent);
  margin-top: var(--ic-space-4);
  border-radius: var(--ic-radius-pill);
}

.section-heading.centered::after {
  margin-left: auto;
  margin-right: auto;
}