/* ============================================================
   Escala tipográfica y estilos de texto
   ============================================================ */

/* El rótulo va solo: llevaba delante una raya de 22 px que se leía como un
   guion suelto —"— Fabricación a medida"— y aparecía en cada capítulo del
   sitio. Sin ella el rótulo empieza donde empieza el titular. */
.eyebrow{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-dim);
}
.eyebrow.on-dark{ color:var(--yellow); }

h2.title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-d3);
  line-height:1.06; letter-spacing:-.025em; color:var(--navy);
}
.on-dark h2.title{ color:var(--white); }
/* Las secciones on-blue también invierten el texto: sin esto el titular queda
   azul sobre azul (pasaba desapercibido con la paleta anterior). */
.section.on-blue h2.title, .section.on-blue .title-xs, .section.on-blue .title-card{ color:var(--white); }
.section.on-blue p.lede{ color:var(--on-dark-100); }
.section.on-blue p.body-text{ color:var(--on-dark-200); }

.title-xl{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-d2);
  line-height:1.02; letter-spacing:-.03em;
}
/* h1 de páginas interiores: un paso bajo el hero de portada */
.title-page{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-d2);
  line-height:1.04; letter-spacing:-.03em; color:var(--white);
}
/* Pasos secundarios de titular — usar SIEMPRE estas clases, nunca font-size en línea */
h2.title.title-sm{ font-size:var(--fs-d4); line-height:1.12; }
.title-xs{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:var(--fs-d5); line-height:1.2; color:var(--navy);
}
.title-card{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:var(--fs-d6); line-height:1.25; color:var(--navy);
}
.on-dark .title-xs, .on-dark .title-card{ color:var(--white); }

/* Bloques de contacto */
.contact-block{ display:flex; flex-direction:column; gap:var(--sp-1); font-style:normal; font-size:var(--fs-xs); color:var(--steel); line-height:1.55; }
.contact-block span:first-child{ color:var(--navy); font-weight:600; }

p.lede{
  font-family:var(--font-body); font-weight:400;
  font-size:var(--fs-lede);
  line-height:1.55; color:var(--tinta);
  max-width:66ch;
}
/* El modificador puede venir en un ancestro o en el propio párrafo */
.on-dark p.lede, p.lede.on-dark{ color:var(--on-dark-100); }

p.body-text{ font-size:var(--fs-body); line-height:1.7; color:var(--tinta); max-width:56ch; }
.on-dark p.body-text, p.body-text.on-dark{ color:var(--on-dark-200); }

.label-mono{
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-light);
}