/* ==========================================================================
   Piezas tipográficas reutilizables: Eyebrow, PullQuote y Chip.
   ========================================================================== */

/* --- Eyebrow: la etiqueta pequeña en versalitas sobre cada titular ------- */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

.eyebrow--inverse {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .72);
}

/* --- PullQuote: las frases emocionales en serif cursiva ----------------- */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-medium);
  line-height: var(--lh-serif);
  font-size: var(--fs-quote);
  color: var(--text-body);
}

.pull-quote--hero { font-size: var(--fs-serif-hero); }

.pull-quote--inverse {
  font-size: var(--fs-serif-closing);
  color: var(--text-on-inverse);
}

/* Variante con la barra turquesa a la izquierda: la cita del doctor. */
.pull-quote--rule {
  border-left: 3px solid var(--state-active-wash);
  padding-left: var(--space-7);
}

/* --- Chip: las credenciales del doctor ---------------------------------- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.chip {
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--bfc-gris-a60);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}