/* Eyebrow — pequeño texto encima de un h1/h2 (turquesa, en mayúsculas, espaciado). */

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: var(--space-sm);
}

/* Variante con barra naranja decorativa al lado. */
.eyebrow--section {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-turquoise);
  margin-bottom: var(--space-md);
}
.eyebrow--section::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-orange);
}

/* En fondos oscuros, mantenemos el turquesa (mismo color funciona bien sobre dark). */
.section--dark .eyebrow,
.section--dark .eyebrow--section {
  color: var(--color-turquoise);
}